[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.