Repository navigation
renderItem and renderItemTitle rerenders causes performance hits #291
Description
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:
- Open sandbox - https://codesandbox.io/s/react-complex-tree-playground-forked-9gszxq
- Expand tree structure
- Click on any item and check the amount of times
renderItemTitleis being rerendered - Navigate with up and down keyboard buttons and check how many times
renderItemTitleis being rerendered - 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):
- OS: Windows 10
- Browser: Chrome
- Version: 119.0.6045.125
Metadata
Metadata
Assignees
Labels
No labels
Activity
lukasbach commentedon Nov 27, 2023
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
docs: faq (#291)