Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

performanceVercel

Hydration-Safe Date Rendering

MUST

MUST: Render dates deterministically on the server — a fixed locale and time zone, or an ISO string inside `<time dateTime>` — and localize inside `useEffect` after hydration. Calling `toLocaleString()`/`new Date()` during render mismatches between a UTC server and the user's zone, discarding the SSR subtree.

Guard date and time rendering against server/client hydration mismatches

Bad

Good

Why it matters

Calling toLocaleString() (or new Date()) during render produces one string on a server running in UTC and a different one in a browser set to Tokyo or Berlin. React compares the two, finds the text node does not match, discards the server-rendered subtree and re-renders it client-side — the exact work SSR was supposed to save. Render a deterministic value first (a fixed time zone and locale, or an ISO string inside <time dateTime>), then localize inside useEffect once hydration has finished.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.