React JS ReactDOM
ReactDom is a core react package that provides methods to interact with the Document Object Model or DOM. This package allows developers to access and modify the DOM. Let’s see in brief what is the need to have the package.
Table of Content
What is ReactDOM ?
The ReactDOM in React is responsible for rendering the elements or Components in the actual DOM of the web page. It is a package in React 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 various methods to manipulate DOM.
How to use ReactDOM ?
To use the ReactDOM in any React web app we must first install the react-dom package in our project. To install the react-dom package use the following command.
// Installing
npm i react-dom
After installing the package use the following command to import the package in your application file
// Importing
import ReactDOM from 'react-dom'
After installing react-dom it will appear in the dependenices in package.json file like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
}
Why ReactDOM is used ?
Earlier, React Developers directly manipulated the DOM elements which resulted in frequent DOM manipulation, and each time an update was made the browser had to recalculate and repaint the whole view according to the particular CSS of the page, which made the total process to consume a lot of time.
To solve this issue, React brought into the scene the virtual DOM. The Virtual DOM can be referred to as a copy of the actual DOM representation that is used to hold the updates made by the user and finally reflect it over to the original Browser DOM at once consuming much lesser time.
Important Methods of ReactDOM
- render(): This is one of the most important methods of ReactDOM. This function is used to render a single React Component or several Components wrapped together in a Component or a div element.
- findDOMNode(): This function is generally used to get the DOM node where a particular React component was rendered. This method is very less used like the following can be done by adding a ref attribute to each component itself.
- unmountComponentAtNode(): This function is used to unmount or remove the React Component that was rendered to a particular container.
- hydrate(): This method is equivalent to the render() method but is implemented while using server-side rendering.
- createPortal(): It allow us to render a component into a DOM node that resides outside the current DOM hierarchy of the parent component.
Features
- ReactDOM.render() replaces the child of the given container if any. It uses a highly efficient diff algorithm and can modify any subtree of the DOM.
- React findDOMNode() function can only be implemented upon mounted components thus Functional components can not be used in findDOMNode() method.
- ReactDOM uses observables thus provides an efficient way of DOM handling.
- ReactDOM can be used on both the client-side and server-side.
Use Case
- Rendering the elements and react app to the root DOM element.
- Hydrating the components rendering on serverside with the client-side intractivity.
- Managing the DOM for dynamic user interface.
Summary
ReactDom is a core part of React responsible for rendering the elements on DOM efficiently form the virtualDOM. It also provides method for dynamically access and manage the DOM of the application.
