How to debug "Hydration failed because initial UI does not match what was rendered on the server" ?
6 months ago
Loading question...
← Back to discussions
discussion
3 answers
- Invalid Nesting: Ensure you aren't placing a
<div>or<p>inside another<p>, or forgetting a<tbody>inside a<table>. - Browser Globals: Avoid using
window,localStorage, ordocumentdirectly in the render body; move these into auseEffecthook. - Time & Randomness: Ensure dates (
new Date()) or random numbers (Math.random()) aren't generated during the initial render, as the values will change between the server and the client. - Third-Party Extensions: Check if a browser extension is injecting code into the DOM, which can be verified by testing in Incognito mode.
This error occurs because the HTML generated by the server must be identical to the HTML generated by the browser during the first render, and any discrepancy—such as invalid HTML nesting (like putting a
<div> inside a <p>), using non-deterministic values like Math.random(), or accessing browser-only globals like window during the initial render—causes React to lose sync. To resolve this, you must ensure your markup follows strict HTML specifications and wrap any client-side-only logic or browser API calls inside a useEffect hook or a useState toggle that only triggers after the component has mounted on the client.
hard to investigate the issue without knowing the actual code. perhaps u can show maybe just a snippet of what is inside that page?
simply said, generally it is because whats rendered on the client side is not sync with what the server trying to render. as previous comments by @kdr1, e.g.
Math.random(), new Dates() and something like that.would be really helpful if u can provide some more info on what u are doing