Q63: What is suppressHydrationWarning and when is its usage acceptable versus anti-pattern?
suppressHydrationWarning suppresses React hydration mismatch warnings on specific DOM elements. It is acceptable only when rendering elements whose attributes intentionally depend on client browser state (such as theme class names, timestamps, or language detection). Using it to hide systemic application state bugs or structural HTML layout mismatches is an anti-pattern.
Legitimate suppressHydrationWarning Usage
// app/layout.js
export default function RootLayout({ children }) {
return (
// Suppresses theme attribute mismatch caused by client theme script modifications
<html lang="en" suppressHydrationWarning>
<body className="bg-white dark:bg-black">{children}</body>
</html>
);
}💡 Safe usage for root html element attribute modifications made by theme script injections prior to hydration.
Key Takeaways
- Suppresses single-level hydration mismatch warnings in DevTools.
- Only affects element attributes where applied; does not apply recursively to deep subtrees.
Knowledge Check
Does applying suppressHydrationWarning to a <div> container suppress hydration errors recursively for all child elements nested deep inside it?