Attribute mismatches aren't patched; suppressHydrationWarning
The className difference only warns, and the DOM keeps server: React will not fix attributes during hydration. The <time> difference is silenced by suppressHydrationWarning, and its server text also stays until the next update.
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
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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
<App>
<div>
<p
+ className="client"
- className="server"
>
+ attribute
...
p class: server
time text: server time