Intermediate LevelReact JS & React 19
What causes React hydration mismatch errors and how do you fix them?
❓ Interview Prompt: Explain SSR Hydration, Server vs Client HTML mismatches, `suppressHydrationWarning`, `useEffect` client-only rendering, and dynamic timestamps.
Hydration Mismatch Errors occur during Server-Side Rendering (SSR) when the initial HTML generated on the server differs from the initial Virtual DOM tree rendered on the client browser during hydration:
Common Causes:
1
Rendering dynamic dates/timestamps ('new Date()').
2
Reading 'window' or 'localStorage' during initial render.
3
Browser extensions mutating DOM tags.
Fixes:
•
Defer client-only values to a 'useEffect' mount pass.
•
Use 'suppressHydrationWarning' on specific text elements (like timestamps).
Code Implementation Example
jsx
function Clock() {
const [time, setTime] = useState(null);
// Render date ONLY on client after hydration finishes!
useEffect(() => {
setTime(new Date().toLocaleTimeString());
}, []);
if (!time) return <span>Loading time...</span>; // Matches server HTML!
return <span>{time}</span>;
}💡Deferring client-side timestamp rendering to useEffect to prevent SSR hydration errors.
🎯 Interview Key Takeaway
Defer client-specific data rendering (window/dates) to useEffect to guarantee matching server and client hydration trees.
#Hydration#SSR#Next.js#Hydration Mismatch#Intermediate
Back to all React JS & React 19 Questions→