Next.js · Senior · Question 40 of 75
A component shows new Date().toLocaleString() and causes a hydration mismatch. What's the most correct fix?
- ✓Correct answer: Show the time after mounting or fix it on the server
- 2Disable hydration for the whole page via a
next.configoption - 3Wrap the component in
React.memoso it doesn't re-render
Explanation
The server and the client are in different time zones and moments in time, so the string differs. Options: a client component that shows the time after mounting; formatting on the server with a fixed zone; suppressHydrationWarning on the element with the timestamp. Browser extensions also often cause mismatches.