[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]
  )}
/>

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[agriffis]

bump

[sim51]

Same issue here, and the fix from @SANGET works.
But it's a work around IMHO.