Blog

Your dream job? Lets Git IT.
Interactive technical interview preparation platform designed for modern developers.

XGitHub

Platform

  • Categories

Resources

  • Blog
  • About the app
  • FAQ
  • Feedback

Legal

  • Privacy Policy
  • Terms of Service

© 2025 LetsGit.IT. All rights reserved.

LetsGit.IT/Categories/Next.js
Next.jshard

Theme toggle hydration mismatch: what causes it and how do you avoid it?

Tags
#nextjs#react#hydration#theme
Back to categoryPractice quiz

Answer

It happens when the server renders one UI (e.g., light icon) but the client renders another after reading localStorage or system theme, so HTML differs. Fixes: make the server know the theme (cookie), or render theme-dependent UI only after mount (client-side), or use a stable placeholder and update it in `useEffect` (optionally with `suppressHydrationWarning`).

Related questions

Next.js
App Router data fetching: what do `cache: 'no-store'` and `revalidate` change?
#nextjs#fetch#cache
Next.js
Static vs dynamic rendering in the App Router: what makes a route dynamic?
#nextjs#rendering#static
Next.js
`next/link` prefetching: what does it do and how can you control it?
#nextjs#link#prefetch
Next.js
Middleware in Next.js: what is it good for and what are its limitations?
#nextjs#middleware#edge
Next.js
Route Handlers in the App Router: how do you define them and what are they used for?
#nextjs#route-handlers#api
Next.js
Cache invalidation: what do `revalidatePath` and `revalidateTag` do?
#nextjs#cache#revalidate