A page is throwing a hydration mismatch in production. How do you track it down?

A mismatch means the HTML rendered on the server does not match the first client render. The usual causes are dates and locale formatting, random values, reading window or localStorage during render, and invalid HTML nesting that the browser silently repairs. Read the diff React logs to find the node, then either move the value into an effect so the first render matches, or render that part on the client only.

First I read the error properly, because React 19 gives you a decent diff showing which node differed, and that is usually enough to name the culprit. Then I run the suspects. Anything time based is number one, so a formatted date or a relative timestamp rendered on the server at one second and on the client at another. Then locale and time zone formatting, because the server is almost always UTC. Then random ids or Math.random in a component. Then anything reading window, matchMedia or localStorage during render, which is common with theme toggles. And finally invalid nesting, like a div inside a p, where the browser fixes the HTML before React sees it. The fix depends on which one it is. For genuinely client only values I render a stable placeholder on the server and set the real value in an effect, or lazy load that piece with server rendering turned off. I only reach for suppressHydrationWarning on a single leaf like a timestamp, never on a wrapper.