Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST
Start learning

React 19+ · Function

hydrateRoot

hydrateRoot attaches React to HTML previously rendered on the server, making it interactive in the browser. The client React tree must produce output identical to the server-rendered HTML.

Since
18.0

How it works

Call hydrateRoot in the browser with the same React tree used to generate the server HTML. React attaches to the existing markup and takes over DOM management; the client output must match the server output, after which the returned root can render updates or unmount the tree.

Syntax

hydrateRoot(domNode, reactNode, options?)

Parameters

NameTypeDescription
domNodeElement | DocumentA DOM element rendered as the root element on the server; pass document to hydrate the entire document.
reactNodeReactNodeThe React node used to render the existing HTML, commonly JSX such as <App />.
optionsobjectOptional configuration for hydration and error handling.

Returns

An object with render and unmount methods.

Key points

  • Use it to attach a React application to HTML generated during server rendering.
  • Hydration reuses existing server HTML instead of starting with an empty container.
  • After hydration, React manages the DOM subtree inside the supplied root element.
  • Pass a client tree whose rendered result matches the server-rendered result.

Common mistakes

  • The client tree must produce the same output as the server tree; mismatches are bugs that should be fixed.
  • Use createRoot instead when there is no server-rendered HTML to hydrate.
  • Do not rely on React to silently correct differences between server and client markup.

Example: Hydrate server-rendered HTML

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

const domNode = document.getElementById('root');
if (domNode) {
  hydrateRoot(domNode, <App />);
}

Hydrates server-rendered markup in the root element and makes the rendered application interactive.

When to use it

Hydrate an SSR app

Server-side rendered application

Activate streamed HTML

Streaming server rendering

Hydrate the document

Whole-document rendering

Make existing markup interactive

Progressive server-rendered UI

  • createRoot
  • renderToPipeableStream
  • renderToReadableStream
  • renderToString

Source: My app - react.dev. Checked 2026-10-15.