React Hydration Mismatch: Dates, Random, and Browser APIs

Symptom

Warning: "Text content does not match server-rendered HTML" or hydrationFailed.

Root cause

Server render differs from the first client render.

Fix, in order

1. The usual culprits: Date, Math.random, window// render placeholders server-side; fill in useEffect
2. Browser-only UI goes behind a mount flagconst [mounted, setMounted] = useState(false); useEffect(()=>setMounted(true))
3. Last resort for genuinely dynamic text<time suppressHydrationWarning>{new Date().toString()}</time>

Prevent it coming back

Deterministic render first, effects second.

Run it on clean infra

Spinning up a fresh box to reproduce or escape this error?

Build apps without servers

Related

Cloud & DevOps tool comparisons · Hardware build guides

NinjaOps publishes free engineering guides. Some outbound links are affiliate links: they cost you nothing and support the site.

Last reviewed 2026-10-02 · NinjaOps SEO grid · DevOps blog