Mount an application
Client-rendered single-page applications
React 19+ · Function
createRoot
createRoot creates a React root connected to a browser DOM element. Call the returned root.render to display React content, or root.unmount to remove the rendered tree.
How it works
Import createRoot from react-dom/client and pass it the browser DOM element that React should manage. The returned root exposes render for displaying React nodes and unmount for removing the rendered tree; createRoot itself only establishes the root, so render must be called afterward.
Syntax
const root = createRoot(domNode, options?)Parameters
| Name | Type | Description |
|---|---|---|
domNode | Element | The browser DOM element that React will manage and use as the root container. |
options | object | Optional configuration for the root. |
Returns
A React root object with render and unmount methods.
Key points
- Use createRoot to establish the client-side React entry point for a browser DOM container.
- Its signature accepts the container and an optional options object.
- The returned root provides render for displaying content and unmount for destroying the tree.
- Pass JSX or another React node to root.render to put content into the container.
- Calling render again lets the same root display different content.
Common mistakes
- Do not use createRoot for server-rendered or statically generated HTML; use hydrateRoot instead.
- The container becomes React-managed, so avoid independently changing the DOM inside it.
- Creating the root does not display anything until root.render is called.
Example: Create and render a browser root
import { createRoot } from 'react-dom/client';
function App() {
return <h1>Hello, React!</h1>;
}
const domNode = document.getElementById('root');
if (!domNode) throw new Error('Missing #root element');
const root = createRoot(domNode);
root.render(<App />);Creates one React root for the browser container and renders the application into it.
When to use it
Render into a selected DOM region
Embedding React in an existing page
Render different content
Replacing or updating the content managed by one root
Interview questions
QWhat does createRoot return and what is it used for?
createRoot initializes a React root associated with a browser DOM element. It returns an object whose render method displays React content and whose unmount method destroys the rendered tree.
Follow-up: How should an already server-rendered container be initialized? Use hydrateRoot rather than createRoot so React can hydrate the existing HTML.
QHow do you render an application with createRoot?
Call createRoot with the target DOM node, then call root.render with a React node such as JSX. React then takes over management of the DOM inside that node.
Follow-up: What happens if root.render is omitted? The root exists, but no React component is displayed.
QWhen should createRoot not be used?
createRoot is for displaying React components in a browser DOM node. Server-rendered applications are not supported with it and should use hydrateRoot instead.
Follow-up: Why is hydration preferable in that case? It reuses the HTML produced by the server rather than replacing it with newly created DOM nodes.
Related
hydrateRootroot.renderroot.unmountcreateElement