lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
944 stars 74 forks source link

`renderItem` and `renderItemTitle` rerenders causes performance hits #291

Closed ozolsg closed 8 months ago

ozolsg commented 9 months ago

Describe the bug When we use renderItem or renderItemTitle, props get called expanded tree list item amount of times. Even when functions are memoized. For smaller amount of list items the performance hit is not noticeable, when clicking or using up and down keyboard keys. However if we have a list of 1000 expanded items, performance hit is noticeable.

To Reproduce Steps to reproduce the behavior:

  1. Open sandbox - https://codesandbox.io/s/react-complex-tree-playground-forked-9gszxq
  2. Expand tree structure
  3. Click on any item and check the amount of times renderItemTitle is being rerendered
  4. Navigate with up and down keyboard buttons and check how many times renderItemTitle is being rerendered
  5. The more items are expanded, the higher the amount of times rerendered

Expected behavior renderItem and renderItemTitle elements not affected by keyboard presses or mouse clicks should not rerender.

Desktop (please complete the following information):

lukasbach commented 9 months ago

Hi!

Yes, the render method for items are retriggered on tree state changes, since every item is provided with information about the tree state in their props, so tree items wouldn't be able to display data they otherwise can.

You can memoize the item render methods directly with only those props that you use, this will ensure that items are not rerendered unless they need to be: https://codesandbox.io/s/react-complex-tree-playground-memo-demo-37mngx