Answer
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page.
ReactDOM provides the developers with an API containing the following methods
- render()
- findDOMNode()
- unmountComponentAtNode()
- hydrate()
- createPortal()
1. render():
ReactDOM.render(element, container, callback)Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components). If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element. If the optional callback is provided, it will be executed after the component is rendered or updated.
⚝ Try this example on CodeSandbox
2. hydrate():
ReactDOM.hydrate(element, container, callback)This method is equivalent to the render() method but is implemented while using server-side rendering. This function attempts to attach event listeners to the existing markup and returns a reference to the component or null if a stateless component was rendered.
⚝ Try this example on CodeSandbox
3. unmountComponentAtNode():
ReactDOM.unmountComponentAtNode(container)This function is used to unmount or remove the React Component that was rendered to a particular container. It returns true if a component was unmounted and false if there was no component to unmount.
⚝ Try this example on CodeSandbox
4. findDOMNode():
ReactDOM.findDOMNode(component)If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.
⚝ Try this example on CodeSandbox
5. createPortal():
ReactDOM.createPortal(child, container)createPortal allow us to render a component into a DOM node that resides outside the current DOM hierarchy of the parent component.