Loading...
Loading...
Error: Hydration failed because the initial UI does not match what was rendered on the server.Hydration errors happen when the HTML generated on the server (SSR) differs from what React generates on the client. React expects the initial client render to match the server HTML exactly. If they differ, React throws this error and switches to client-side rendering, which can cause layout shifts.
Ensure your HTML is valid. A common mistake is putting a div inside a p tag.
// ❌ Invalid HTML (p cannot contain div)
<p>
<div>Content</div>
</p>
// ✅ Valid HTML
<div>
<div>Content</div>
</div>If you need a random number or current time, set it in useEffect so it only runs on the client.
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
if (!isClient) return null; // or a loading spinner
return <div>{window.innerWidth}</div>;Use suppressHydrationWarning if the mismatch is intentional (like a timestamp).
<time datetime="2023-10-25" suppressHydrationWarning>
{new Date().toLocaleTimeString()}
</time>