A hydration error occurs when the [HTML](/courses/html) generated by the server does not match what [React](/courses/reactjs) produces during the browser's first render. ### What Is Hydration? [Next.js](/courses/nextjs) can send [HTML](/courses/html) such as: ```html ``` Then [React](/courses/reactjs) runs in the browser and attaches interactive behavior to that existing HTML. That process is called hydration. The server and initial client render must agree. ### Common Cause: Browser-Only Rendering Logic Unsafe example: ```tsx const isBrowser = typeof window !== 'undefined'; return (

{isBrowser ? 'Browser' : 'Server'}

); ``` Server output: ```text Server ``` Initial client output: ```text Browser ``` The trees differ. ### Browser APIs Avoid using values from: ```text window localStorage navigator ``` during rendering when they cause server/client output to differ. Move client-only logic into an effect where appropriate: ```tsx 'use client'; import { useEffect, useState } from 'react'; export default function Theme() { const [theme, setTheme] = useState(null); useEffect(() => { setTheme(localStorage.getItem('theme')); }, []); if (theme === null) { return null; } return

{theme}

; } ``` ### Time and Random Values Values such as: ```javascript new Date() Math.random() ``` can differ between server and browser renders. ### Invalid HTML Nesting This is invalid: ```html

Content

``` Browsers may correct the HTML structure differently from what React expects. Interactive elements should also not be nested incorrectly, such as: ```html ``` ### Browser Extensions and CDNs Hydration mismatches can occasionally come from browser extensions or infrastructure modifying the server HTML. ### suppressHydrationWarning React provides: ```tsx {time} ``` for rare cases where a difference is intentional. Treat it as an escape hatch, not a normal fix. ### Interview-Ready Answer Hydration errors occur when the server-rendered HTML differs from the browser's initial React render. Common causes include browser-only APIs during rendering, time-dependent or random values, invalid HTML nesting, and environment-dependent output. Fix the underlying mismatch and use `suppressHydrationWarning` only for intentionally unavoidable differences.