React · Senior · Question 6 of 75

Which code in render typically causes a hydration error?

✓Correct answer: new Date().toLocaleTimeString() or a typeof window !== 'undefined' branch
2useState with an initial value from props passed from the server
3Calling useMemo with an empty dependency array in a client component

Explanation

The server and the client must render the same HTML. Time, random numbers, checking window, localStorage and the browser locale produce different results. Show client-only values after mounting (an effect or useSyncExternalStore with getServerSnapshot). For unavoidable text differences (a timestamp) there's suppressHydrationWarning.

Which code in render typically causes a hydration error?

Explanation

Further reading

Problem with a question

Test yourself