Putting dom reference into store will cause lag

[MilesLeeeeee]

Summary

Hello
I tried putting the dom reference into the store to make it easier for me to use, but I found that it made the browser lag.

I tested in three browsers

chrome：117
edge：117
firefox：116

Chrome and edge are experiencing serious lags

firefox runs fine

Is there something wrong with my operation or should I not put the dom reference into the store?

Link to reproduction

https://codesandbox.io/s/zustand-dom-test-d7g4l3?file=/src/App.js

You can see the difference by changing the comment on this line

[dai-shi]

Can anyone look into this?

[Pong420]

It should because of the devtools middleware. Remove it or adding the stateSanitizer option.

{
  name: "bear",
  stateSanitizer: (state) => {
    return JSON.parse(
      JSON.stringify(state, (_key, value) => {
        if (typeof value === "function") return undefined;
        if (value instanceof HTMLElement)
          return `${value.tagName} ${value.className}`;
        if (value instanceof Date) return value.toLocaleString();
        return value;
      })
    );
  },
}

The root cause should be related to facebook/react#24360
setting this property also work

HTMLElement.prototype.toJSON = () => "{}";