React DOM

19.2.5 · active · verified Sat Apr 18

react-dom is the entry point for React applications when rendering to the DOM. It provides DOM-specific methods needed to manage and update the browser's DOM. The current stable version is 19.2.5. It receives frequent patch releases, often in sync with the `react` package and other related tools.

Common errors

```
Error: ReactDOM.render is no longer supported in React 18. Use createRoot instead.
```
cause Attempting to use the legacy `ReactDOM.render` API in a React 18+ application.

fix Replace `ReactDOM.render(<App />, document.getElementById('root'));` with: `import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render(<App />);`
```
npm ERR! ERESOLVE unable to resolve dependency tree ... Unmet peer dependency 'react'
```
cause `react-dom` requires `react` as a peer dependency, but it's either missing or installed at an incompatible version.

fix Install `react` with a compatible version, e.g., `npm install react@^19.2.5` or `yarn add react@^19.2.5`.
```
Configuration for rule "react-hooks/component-hook-factories" is invalid
```
cause Your ESLint configuration references the `component-hook-factories` rule, but `eslint-plugin-react-hooks@7.1.0` temporarily removed it.

fix Upgrade `eslint-plugin-react-hooks` to version `7.1.1` or later: `npm install eslint-plugin-react-hooks@latest`.

Warnings

breaking `ReactDOM.render` and `ReactDOM.hydrate` are deprecated in React 18+ and will be removed in a future major release. They are replaced by `createRoot` and `hydrateRoot` respectively.
Fix: Migrate from `ReactDOM.render(<App />, container)` to `import { createRoot } from 'react-dom/client'; const root = createRoot(container); root.render(<App />);`
gotcha `react-dom` has a peer dependency on `react`. Ensure you have `react` installed at a compatible version to avoid installation issues or runtime errors.
Fix: Install `react` alongside `react-dom` with a matching major version, e.g., `npm install react@^19.2.5` or `yarn add react@^19.2.5`.
gotcha `eslint-plugin-react-hooks@7.1.0` accidentally removed the `component-hook-factories` rule, causing errors for users who referenced it in their ESLint config. This was fixed in `7.1.1`.
Fix: Upgrade `eslint-plugin-react-hooks` to `7.1.1` or later: `npm install eslint-plugin-react-hooks@latest`.

Install

npm install react-dom npm
yarn add react-dom yarn
pnpm add react-dom pnpm

Imports

createRoot
wrong:
```
import { render } from 'react-dom'
```
correct:
```
import { createRoot } from 'react-dom/client'
```
For React 18+ applications, use createRoot for initial rendering.
hydrateRoot
```
import { hydrateRoot } from 'react-dom/client'
```
For hydrating server-rendered React applications (React 18+).
ReactDOM
```
import ReactDOM from 'react-dom'
```
Primarily for legacy APIs like ReactDOM.render or when accessing other ReactDOM methods not available via react-dom/client.

Quickstart

Demonstrates how to render a basic React component into a DOM element using `createRoot`, the recommended method for React 18+ applications.

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

function App() {
  return <h1>Hello, React 19!</h1>;
}

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
} else {
  console.error('Root element not found in the DOM.');
}

view raw JSON →