Fixing React Hydration Errors

When you use server-side rendering (SSR), React first renders your component on the server as HTML. The browser displays this HTML immediately (fast initial load). Then React 'hydrates' — it attaches event handlers and makes the HTML interactive. Hydration errors occur when the server HTML doesn't match what React tries to render on the client.

Using browser-only APIs during render: Date.now(), window.innerWidth, localStorage. These don't exist on the server, so the server renders different content than the client. Conditional rendering based on auth state that's only available client-side. Using random values or time-dependent content. HTML nesting violations (like a <p> inside a <p>).

For browser-only values: render a default on the server and update client-side with useEffect. For auth-dependent content: use Suspense boundaries or loading states. For time-dependent content: use suppressHydrationWarning on the specific element (last resort). For HTML violations: fix the nesting — use the browser's DOM inspector to find invalid structures.

The safest way to render browser-only content: start with a server-safe default, then update after mount. Use a state variable initialized to the safe default, and update it in useEffect. This ensures the server and client render the same content initially, then the client updates to the correct value.