debugreactMajorpending

React hydration mismatch -- server and client HTML differ

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

hydration mismatchSSRsuppressHydrationWarninguseEffect

browsernodejs

Error Messages

Text content does not match server-rendered HTML

Hydration failed

Problem

React warns about hydration mismatch. App may flash or lose interactivity after server rendering.

Solution

Causes: (1) Using Date.now() or random() during render. (2) Invalid HTML nesting (p inside p). (3) Browser extensions modifying DOM. Fix: use useEffect for client-only values. Use suppressHydrationWarning for intentional mismatches.

Why

SSR sends HTML. React hydration attaches handlers to existing DOM. If DOM does not match expectations, it cannot safely attach.

Revisions (0)

No revisions yet.