Debug: React hydration mismatch errors

React throws 'Hydration failed because the initial UI does not match what was rendered on the server' or 'Text content does not match server-rendered HTML'.

Common causes and fixes:

1. Using browser-only APIs during render:

Bad: {window.innerWidth > 768 && <Desktop />}
Fix: Use useEffect + useState for client-only content

1. Date/time rendering:

Bad: {new Date().toLocaleString()}
Fix: Render dates in useEffect or use suppressHydrationWarning

1. Browser extensions injecting elements:

Fix: Usually harmless, but wrap dynamic content in suppressHydrationWarning

1. Invalid HTML nesting:

Bad: <p><div>...</div></p>
Fix: Use valid HTML nesting

1. Conditional rendering based on auth/cookies:

Fix: Show loading skeleton on server, real content after hydration

// Pattern for client-only content:
function ClientOnly({ children }) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return mounted ? children : null;
}

React SSR sends HTML from the server, then hydrates it client-side. If the client render produces different HTML, React can't reconcile the DOM.