Intermediate
Fix a hydration mismatch
Visits reads the visit count from localStorage while rendering. The "server" can't see localStorage, so its HTML says Welcome! while the browser's first render says Visit number 3, and hydration fails (see the console).
Fix Visits so the first client render matches the server, and the paragraph #visits shows Visit number 3 right after hydration. Keep using hydrateRoot, and don't hide the problem with suppressHydrationWarning.
What Check tests
- No hydration error or warning in the console
#visitssaysVisit number 3after hydration- Still hydrates with
hydrateRoot - Doesn't use
suppressHydrationWarning - Reads storage after hydration (in an effect)
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.