Fixing it: effect after hydration, or a server snapshot
No warnings this time: both components render the server's version during hydration and switch to the browser's value right after. localStorage here is the preview's in-memory copy.
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
server HTML: Welcome!Times shown in your time zone
after hydration: Welcome back, Asha | Times shown in UTC+5:30