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 = () => "{}";

[MilesLeeeeee]

Yes, I tried the two methods you mentioned, and they did solve the problem. I didn't realize the problem was so deeply hidden. Thank you for your answer.

[vincedsb1]

To avoid browser lag when putting DOM references into a Zustand store, you can utilize the stateSanitizer option or remove the devtools middleware. This can help prevent performance issues, especially in Chrome and Edge browsers.

Here's an example of how you can configure your store to use 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;
      })
    );
  },
}

This configuration helps sanitize the state, preventing potential performance issues caused by DOM references in Chrome and Edge browsers.

Additionally, you can set HTMLElement.prototype.toJSON to an empty object to address the root cause related to the issue mentioned in the Facebook React repository.

Hope this helps! If it solves your issue, could you please mark this comment as the answer? It helps others find the solution faster. 🙏

[MilesLeeeeee]

Yes, both methods can solve the problem. Thank you for your answer. 👍