What causes hydration mismatches and how do you fix them?
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Hydration is React attaching event handlers to server-rendered HTML. A mismatch happens when the server HTML differs from the client's first render, and React warns and re-renders or discards the tree. Common causes are rendering Date.now(), Math.random(), typeof window checks, localStorage reads, Intl formatting differences, invalid HTML nesting such as a div inside a p, and browser extensions injecting nodes.
In Next.js, avoid browser-only values during render. Initialise state to a deterministic value and set it in an effect, or gate rendering behind a mounted flag:
const [now, setNow] = useState<number | null>(null);
useEffect(() => setNow(Date.now()), []);
suppressHydrationWarning silences known-safe text mismatches such as timestamps, but it hides bugs, so use it sparingly and never on a whole subtree. Because server and client must run the same code path, check shared components for conditional window logic and for locale or timezone formatting that differs between environments.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.