← React Beginner Questions - Set 2 Q11

What is the purpose of ReactDOM?

React Beginner Questions - Set 2

React builds the tree; react-dom is the package that talks to the browser and puts it on screen. Since React 18 it is also where the root lives.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');

// createRoot returns a handle, not an element
const root = createRoot(container);
root.render(<App />);

// Later, to tear the whole tree down (tests, widgets, micro-frontends)
// root.unmount();

// react-dom also exposes the server entry point:
// import { renderToString } from 'react-dom/server';

What to notice

• `react` has no idea what a DOM is — it is shared with React Native, where `react-dom` does not exist.
• React 18 replaced `ReactDOM.render` with `createRoot`; the old call still works but logs a deprecation warning.
• One root per DOM container: mounting twice on the same node leaves the first tree orphaned.