Avoiding redundant renders in large lists?

[Wahib]

I store the count of N counters in Zustand (3.5.10). Clicking on a counter increments it's count but forces a re-render of all the items in the list. Why? I made sure to memoize the selector and use shallow equality comparison. Please help!

https://codesandbox.io/s/hopeful-herschel-sk8uk?file=/src/App.js

• React DevTools > Highlight updates when components render
  

[dai-shi]

Here you go: https://codesandbox.io/s/naughty-rumple-sxey9

[Wahib]

Thanks. Your proposed solution will work as long as the list of child elements (counters) is static. What if we can add/delete counters dynamically? I have modified your solution (https://codesandbox.io/s/flamboyant-pike-x012b?file=/src/App.js) to add a button for deleting counters. Now clicking the plus button avoids redundant renders but clicking the delete button again causes all the child elements to re-rendering.

[dai-shi]

https://codesandbox.io/s/staging-microservice-tmk8w
In such case, React.memo will help.

[Wahib]

That seems to do the trick. Thanks for all the help!