React Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
Why it exists
Server-Side Rendering (SSR) solves the slow initial load time of client-side apps by sending ready-to-display HTML. But this HTML is static and not interactive. Hydration was created to bridge this gap, making the server-rendered content dynamic without discarding the initial HTML and re-rendering everything from scratch.
The mental model
Hydration is like activating a dormant robot. The server ships a fully assembled but powered-down robot (the static HTML). When the client-side JavaScript loads, it doesn't build a new robot; instead, it runs hydrateRoot to power it on, attaching the nervous system (event listeners) and brain (state management) to the existing structure.
How it works
On the server, a function like renderToString(<App />) generates an HTML string. The browser receives and renders this static HTML. On the client, your JavaScript bundle calls hydrateRoot(domNode, <App />). React then walks the existing DOM and its own virtual DOM, expecting them to be identical. It attaches event listeners to the DOM nodes and takes over management of the app, making it fully interactive.
When to use it
Use hydration in any React app that employs Server-Side Rendering (SSR) or Static Site Generation (SSG). Frameworks like Next.js or Remix manage this process for you automatically. It's the standard pattern for combining the fast initial paint of server-rendered pages with the rich user experience of a single-page application.
When not to use it
You do not use hydration for a purely Client-Side Rendered (CSR) app. In a CSR app, the server sends a minimal HTML shell, and you use createRoot to render the entire application into an empty DOM element from scratch on the client.
One canonical example
The most common footgun is a content mismatch. Imagine your component renders new Date().getTime(). The timestamp generated on the server will be different from the one generated on the client moments later. During development, React will warn you: "Warning: Text content did not match. Server: '1678886400000' Client: '1678886400005'". This must be fixed, often by deferring client-specific rendering until after an initial useEffect runs.
Interview question
What is the primary functional difference between React's hydrateRoot and createRoot methods?
- a.hydrateRoot is used for applications requiring server-side state management, while createRoot is for client-side state only.
- b.hydrateRoot executes its rendering logic exclusively on the server, while createRoot executes exclusively in the client's browser.
- c.hydrateRoot attaches interactivity to pre-existing server-rendered HTML, whereas createRoot renders the entire application into an empty DOM element.Correct
- d.hydrateRoot is designed for static content display, while createRoot is for dynamic, interactive user interfaces.
Why? this is the answer
hydrateRoot is used on the client to 'wake up' and attach interactivity to HTML already rendered by the server. In contrast, createRoot is used in purely client-side rendered apps to build the entire application's DOM from scratch into an empty element.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles