react hydration_error ai_generated true

Warning: Prop `className` did not match. Server: "server-class" Client: "client-class"

ID: react/react-hydration-attribute-mismatch

Also available as: JSON · Markdown
86%Fix Rate
89%Confidence
120Evidence
2022-03-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

HTML attribute/prop mismatch between server-rendered HTML and client-side React hydration. Common causes: CSS-in-JS generating different classNames, browser extensions injecting attributes, conditional rendering based on window/navigator.

generic

Workarounds

  1. 90% success Ensure CSS-in-JS library is configured for SSR (e.g., styled-components ServerStyleSheet, emotion extractCritical) 
    For styled-components: use ServerStyleSheet in server rendering. For emotion: use extractCriticalToChunks. Ensure the same hash/seed is used on server and client.

    Sources: https://styled-components.com/docs/advanced#server-side-rendering https://emotion.sh/docs/ssr

  2. 88% success Defer browser-only attribute computation to useEffect 
    const [className, setClassName] = useState('server-safe-class'); useEffect(() => { setClassName(computeClientClass()); }, []);

    Sources: https://react.dev/reference/react/useEffect

Dead Ends

Common approaches that don't work:

  1. Add suppressHydrationWarning to all mismatched elements 70% fail

    Suppresses the warning but the visual flicker remains as React patches the DOM. Does not fix CSS-in-JS class mismatch which causes FOUC.

  2. Force client-side rendering to avoid hydration entirely 65% fail

    Eliminates SSR benefits including SEO, initial load performance, and time-to-first-contentful-paint

Error Chain

Leads to:
Preceded by:
Frequently confused with: