Sarang
Blog

Three hydration traps I keep hitting

1 min read
  • React
  • Next.js

Hydration mismatches all come from the same place: the server renders one thing, the client renders another, and React notices. Three of them get me over and over.

First, locale-dependent dates. `toLocaleDateString(undefined, …)` uses the server's locale on the server and the browser's on the client. Pin the locale explicitly — `'en-US'` — and the strings agree.

Second, theme branching. Reading the resolved theme during render means the server (which has no theme) and the client disagree. Gate theme-dependent output behind a mounted flag, or lean on CSS `dark:` variants so the branch never touches JS.

Third, clocks. A live time renders differently every millisecond, so the server's value is always 'wrong'. Render it with `suppressHydrationWarning` and let the client correct it on mount — and tick on the minute, not the second, if all you show is HH:MM.