A real hydration mismatch
Simulated server (a flag instead of a real server), real React error. React prints the diff (+ what the client rendered, - what the server sent) and re-renders on the client, so the screen ends up right but the server HTML was wasted.
Hydration is React rendering the same tree in the browser and adopting the server's HTML instead of creating new DOM; if the first client render produces different output (dates, random values, browser-only data, invalid nesting), React reports a hydration mismatch, so make the first client render match the server and change things after hydration.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Rewrite function Width() { return <p>{window.innerWidth}px</p>; } so it works with SSR without a mismatch.
A server in UTC renders new Date("2024-01-15T10:30:00Z").toLocaleString(). Why can it mismatch, and how do you make it stable?
Explain it without notes
Explain step by step what hydrateRoot does.
List five causes of hydration mismatches and the fix for each.
What's the difference between a text mismatch and an attribute mismatch in React 19?
When is suppressHydrationWarning appropriate?
Preview
Console
Nothing logged yet.Expected console output
Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
<Where>
<p>
+ Rendered in the browser
- Rendered on the server
Screen: Rendered in the browser