[React 19] dangerouslySetInnerHTML causes repaint

[lukahartwig]

Summary

Given the following component

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount((count) => count + 1)}>{count}</button>
      <div dangerouslySetInnerHTML={{ __html: "I should only paint once" }} />
    </>
  );
}

Clicking the button should not trigger a repaint of "I should only paint once". This works as expected in react@18.3.1 but not in react@19.0.0-rc.1 or react@0.0.0-experimental-5b0ef217-20241202.

• Browser: Chrome Version 131.0.6778.86 (Official Build) (arm64)
• OS: MacOS 15.1.1 (24B91)

react@18.3.1

Screen.Recording.2024-12-03.at.13.16.43.mov

react@0.0.0-experimental-5b0ef217-20241202

Screen.Recording.2024-12-03.at.13.17.50.mov

Source Code

[lukahartwig]

I did some bisecting

Last good version: 18.3.0-next-41b4714f1-20230328
First bad version: 18.3.0-next-85de6fde5-20230328

The issue seems to be caused by this refactoring.

[agriffis]

I suspect this is the same root cause as #31600

[lukahartwig]

Yes, this looks like the same issue.

Basically, the regression is React used to check if the passed html string has changed before applying it, but in the above mentioned refactor that was replaced by a generic equality check.

But because setDangerouslyInnerHTML takes an object, the equality check always fails and React always overrides el.innerHTML.

[SANGET]

This usage fix the issue for my case:

<div
  contentEditable={true}
  dangerouslySetInnerHTML={useMemo(
    () => ({ __html: value }),
    [value]
  )}
/>