Loading...
Loading...
Error: Hydration failed because the initial UI does not match what was rendered on the server.Hydration is the process where React attaches event listeners to server-rendered HTML. This error means the HTML rendered on the server doesn't match what React tries to render on the client. React requires them to be identical.
Move any browser-only logic into useEffect so it only runs on the client after hydration.
'use client';
import { useState, useEffect } from 'react';
export function MyComponent() {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
if (!isClient) return null; // or a skeleton
return <div>{window.location.href}</div>;
}For intentionally different content (like timestamps), suppress the warning on that specific element.
<time suppressHydrationWarning>
{new Date().toLocaleString()}
</time>Check for invalid HTML — a common cause is putting block elements inside inline elements.
// ❌ Invalid — div inside p
<p><div>content</div></p>
// ✅ Valid
<div><div>content</div></div>