`hydrateroot`

Attaches React to server-rendered HTML inside a DOM node.

Since React 18 Spec ↗

Syntax

const root = hydrateRoot(domNode, reactNode, options?)

Parameters

Name	Type	Required	Description
`domNode`	`Element`	Yes	The DOM node whose server-rendered HTML should be hydrated.
`reactNode`	`node`	Yes	The React node that produced the server HTML (often <App />).
`options`	`object`	No	Optional config such as onRecoverableError and identifierPrefix.

Returns

object — A root object with render and unmount methods.

Examples

import { hydrateRoot } from 'react-dom/client';

hydrateRoot(
  document.getElementById('root'),
  <App />
);

Notes

Use it instead of createRoot when HTML was generated by react-dom/server. The rendered tree must match the server output; mismatches trigger recoverable hydration errors and client re-rendering. Avoid changing markup based on client-only values during the initial render.