Hydration error
A hydration error occurs in React (and frameworks like Next.js) when the HTML rendered on the server does not match what the client renders on first load. React expects the two to be identical so it can "hydrate" — attach event handlers to existing markup — and a mismatch produces a console error and can break interactivity.
Also known as: hydration mismatch · text content did not match
Common causes include rendering values that differ between server and client (Date.now(), Math.random(), locale-dependent formatting), reading window/localStorage during render, or invalid HTML nesting. Fixes include moving non-deterministic logic into useEffect, gating browser-only code behind a mounted check, or correcting the markup.
In Lovable-generated apps a hydration mismatch can show up as a blank preview or a component that flickers and then breaks, because the AI sometimes adds browser-only logic directly into a component's render path. Common mistake: reading window or localStorage during render in a Lovable-generated component — move that access into a useEffect or a mounted check so the first client render matches the server output.
Stuck on the thing this term describes? Talk to a senior engineer.
Book a free 30-minute audit call. We'll diagnose what's wrong and tell you exactly what it costs to fix.