This PR adds a prop for getVisibleItemBounds. This allows efficient control of what range of items is rendered. Using this prop to control the range is more efficient than mapVirtualToProps because getVisibleItemBounds can prevent renders from happening. If the values returned by getVisibleItemBounds matched the {firstIndex, lastIndex} values stored in the component state, the state will not be updated.
A situation where this is useful is if you want to lazily render items and never remove them from the DOM. This is useful if items are very heavy and the number of items is small enough (seems fine to be <10k, maybe more). I added an input on the demo controls that illustrates this sort of approach. If mapVirtualToProps is used to achieve this, the list will still render when scrolling even if the relevant items are already rendered.
tiffon
commented
2 years ago
This PR adds a prop for
getVisibleItemBounds. This allows efficient control of what range of items is rendered. Using this prop to control the range is more efficient thanmapVirtualToPropsbecausegetVisibleItemBoundscan prevent renders from happening. If the values returned bygetVisibleItemBoundsmatched the{firstIndex, lastIndex}values stored in the component state, the state will not be updated.A situation where this is useful is if you want to lazily render items and never remove them from the DOM. This is useful if items are very heavy and the number of items is small enough (seems fine to be <10k, maybe more). I added an input on the demo controls that illustrates this sort of approach. If
mapVirtualToPropsis used to achieve this, the list will still render when scrolling even if the relevant items are already rendered.