Bug: 【React19】 hydrateRoot issues a hydration warning when used with dangerouslySetInnerHTML and suppressHydrationWarning.

[aofong19871029]

React version: 19.1.0

Steps To Reproduce

Using dangerouslySetInnerHTML or suppressHydrationWarning during hydration may result in client-side replacement of SSR-rendered DOM with empty content, rather than preserving the server-rendered markup.

const {
canHydrate = false,
children,
} = props;
const root = useRef<HTMLElement | null>(null)
useEffect(() => {
if (
root.current &&
canHydrate
) {
hydrateRoot(root.current, children)
}
}, [canHydrate, children])
return (
<section
ref={root}
dangerouslySetInnerHTML={{ __html: '' }}
suppressHydrationWarning
/>
)

The current behavior

dangerouslySetInnerHTML and suppressHydrationWarning change the ssr html to empty, and then hydrate fail

The expected behavior

dangerouslySetInnerHTML and suppressHydrationWarning cancel the hydration and keep the ssr html, and then manual hydration success

[inject3r]

Hi, @aofong19871029

It seems like the problem is related to the combination of dangerouslySetInnerHTML and suppressHydrationWarning during SSR hydration. When used together, React unexpectedly replaces the SSR content with empty content, which causes the hydration process to fail.

In React, hydration means ensuring that the HTML from the server matches the DOM state on the client side. When dangerouslySetInnerHTML is used with an empty value and suppressHydrationWarning is active, React detects a mismatch between the server-rendered content and the client-side content, and mistakenly cancels the hydration.

To resolve this, I’d suggest avoiding using both features together, or if you must, finding an alternative solution for hydration that handles SSR content independently. This way, you can prevent conflicts and ensure proper hydration.