Slow state update with long list of data

[ghost]

React version: 18.2.0

Steps To Reproduce

Live example:
CodeSandbox

The current behavior

Checkbox works very slow

The expected behavior

Checkbox works instantly

[sohaibMan]

I think the problem is just the large complexity of your algorithms and the cost of unnecessary recalculations.
Here is an example of an optimzed version of your app with same features .
Live example:
sandbox

[ghost]

@sohaibMan
"the large complexity"
I'm not sure there's much complexity to it, as this bug is not visible at fairly smaller list of players like 100, for example

I was able to eliminate it by refactoring useState into useRef using kind of your no useState approach

Optimized CodeSanbdox useRef version

But, I'm still curious

1. Why useState hooks seems to slow things down
2. Is there a way to display this large data set, and use useState hook while having a quick performance?
   (The trade off with the useRef hook is that it goes out of the component lifecycle, so useEffect does not track it which can be a bummer in certain cases)

[kalp2525]

For my app this feature work great

[hhkk28]

When we update one record of the entire array, react has to render all components for the table. useState happens fast. Painting the DOM is the one that is being delayed. To test that, one can try clicking on other checkboxes, and the dom will be unresponsive. From my experience, when such a huge list is involved, i would manage the states for each table row rather than having a global state at the top level. So in this case, toggling a check box will only re-render a particular table row and not the entire table. Combining that with virtual lists we can achieve snappy UI even for huge lists.

[ghost]

@hhkk28 Then why it works fast when I use useRef instead of useState?
Seems like React virtual DOM is not very smart about it

[hhkk28]

@alexander-vashchuk React re-renders only when a state or props is changed. In case of updating refs, react re-render any nodes. That is the intended behavior. In react developer tools, enable the toggle Highlight updates when components render. to see the components that are re-rendered. In the case of the checkbox with useRef, only the checkbox is re-rendered due to the internal state change of material ui, whereas in the case of the checkbox with useState, the entire table is re-rendered.

Please check this well written blog on react rendering behaviour to understand when react triggers re renders and when it does not - Why React Re-Renders

[Seven-Y-Q-Guo]

@hhkk28 Then why it works fast when I use useRef instead of useState?
Seems like React virtual DOM is not very smart about it

You can use this tool to help you figure out why some components are rerendering and how to resolve them on your side to avoid unnecessary rerenders.
https://github.com/welldone-software/why-did-you-render

[LaiZhou]

I think the state comparision for the long list also takes long time.

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

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!