Next.js · Senior · Question 67 of 75

How do you apply a saved theme or locale-specific date before the first paint without a hydration error or flash?

✓Correct answer: A small inline script in the HTML that reads client state and updates the DOM synchronously while parsing
2Read localStorage in useEffect
3Render the component only on the client with ssr: false

Explanation

The server can't know client preferences. useEffect causes a flash, and rendering client values during hydration causes a mismatch; an inline script runs before paint.

How do you apply a saved theme or locale-specific date before the first paint without a hydration error or flash?

Explanation

Further reading

Problem with a question

Test yourself