Hydration failed React Origin: On your device Last updated 15 Oct 2026

Error: Hydration failed because the initial UI does not match what was rendered on the server

The HTML rendered on the server differs from the first client render, so React (Next.js/Remix) can’t attach to it.

Exact message you may see Hydration failed because the initial UI does not matchText content does not match server-rendered HTMLThere was an error while hydratingHydration failed because the server rendered HTML didn't match the client
Explore the map of this error Full error map →
Seen on: React

Meaning

Server-side rendering requires the first client render to produce identical markup. Values that differ between server and browser — dates, random IDs, window/localStorage, locale formatting — or invalid HTML nesting cause mismatches.

Common causes

  • Rendering Date.now(), Math.random() or locale-dependent formatting
  • Reading window, localStorage or media queries during render
  • Invalid nesting (<div> inside <p>, <a> inside <a>)
  • Browser extensions modifying the DOM
  • Different data on server vs client

⚡ Quick fix

  1. Move browser-only values into useEffect (render a placeholder first)
  2. Fix invalid HTML nesting
  3. Use suppressHydrationWarning only for unavoidable text like timestamps
  4. Render client-only components with dynamic(() => import(...), { ssr: false }) in Next.js

Detailed fix by platform

React

  1. Client-only value after mount:
    jsx
    function LocalTime({ iso }) {
  const [text, setText] = useState('');               // same on server and first client render
  useEffect(() => setText(new Date(iso).toLocaleString()), [iso]);
  return <time dateTime={iso}>{text}</time>;
}

How to diagnose

  1. Diff — Which text/element differs (dev overlay shows it)?
  2. Browser APIs — window/localStorage/Date used in render?
  3. HTML — Invalid nesting?
  4. Extensions — Reproduce in a clean profile

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

async Client Component — Error: async/await is not yet supported in Client Components, only Server Components. (React)async Client ComponentCan't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'Dynamic server usage — Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` (React)Dynamic server usageFunctions cannot be passed — Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". (React)Functions cannot be p…Invalid hook call — Error: Invalid hook call. Hooks can only be called inside of the body of a function component. (React)Invalid hook callMinified React error — Error: Minified React error #31; visit https://react.dev/errors/31 for the full message (React)Minified React errorneeds useState — You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client" (React)needs useStatenext/image hostname — Error: Invalid src prop on `next/image`, hostname "x" is not configured under images in your `next.config.js` (React)next/image hostnameHydration…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.