Skip to main content

package react-dom/client

The react-dom/client package in React provides client-specific methods for initializing and managing a React application within a browser environment. This package is specifically designed for rendering and interacting with the Document Object Model (DOM) on the client side.
Key functionalities provided by react-dom/client include:
  • createRoot(): This function is the entry point for creating a root for your React application in React 18 and later. It takes a DOM element as an argument and returns a root object, which you then use to render your React components. 
    import { createRoot } from 'react-dom/client';
    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(<App />);
  • hydrateRoot():
    This function is used for hydrating a server-side rendered (SSR) React application on the client. It takes the server-generated HTML and attaches event handlers and state, making the application interactive.
  • root.render():
    A method of the root object returned by createRoot(), used to render a React element into the DOM.
  • root.unmount():
    A method of the root object returned by createRoot(), used to unmount a React component from the DOM.
In essence, react-dom/client is the bridge between your React components and the browser's DOM, enabling the rendering, updating, and management of your application's user interface on the client side. It's the modern way to handle client-side rendering in React, especially with the introduction of React 18's new concurrent feature
Back to top