Skip to content
FrontendHaltFrontendHalt
React·Intermediate·Coding·1 min read

What causes hydration mismatches?

Short interview answer

Nondeterministic output such as time or randomness, different locale or time zone, invalid HTML reparsing, browser-only branches, extensions, and data differences can make server and first-client trees disagree. The fix is deterministic initial rendering, not blanket suppression.

Example

JSX
// Mismatch: server and client compute different text<span>{new Date().toLocaleTimeString()}</span>
// Fix: render a stable value, then update after mountconst [now, setNow] = useState(null);useEffect(() => setNow(new Date()), []);

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to SSR and hydration

Related questions