Repository navigation
How to NOT re-render list rows when scrolling? #74
Description
Assume I have the following settings:
The container height: 400
The row height: 40
const virtual = useVirtual({
size: 1000,
parentRef,
overscan: 20,
estimateSize: useCallback(() => 40, [size]),
})
It seems that the container re-renders every visible row every time new row appears. This behavior maybe intentional but what if my row is heavyweight and the cost to re-render them is not trivial?
What I want to do is re-render only when the last row is visible.
In the above setup, I should see re-render happen once when i scroll to the 30th element, and insert next 20 element since overscan is 20.
Edit:
After play around with the source code, I see that setRange(prevRange => calculateRange(latestRef.current, prevRange)) actually cause the re-render every time index change.
I changed the if condition from
if (!prevRange || prevRange.start !== start || prevRange.end !== end) {
return {
start: start,
end: end
};
}
to
if (!prevRange ||
Math.abs(start - prevRange.start) > overscan - 1 ||
Math.abs(end - prevRange.end) > overscan - 1
) {
return {
start: start,
end: end
};
}
It reduce re-render from 999 to 50 when the data size is 1000 and overscan is 20.
Maybe we can allow developer to pass custom calculateRange function if they need to optimize performance? or improve calculateRange when overscan is used?
https://github.com/tannerlinsley/react-virtual/blob/master/src/index.js#L77
Activity
[-]How to reduce re-render when use overscan?[/-][+]How to NOT re-render list rows when scrolling?[/+]mogelbrod commentedon Oct 27, 2020
I think this could be a nice opt-in behavior to reduce the number of re-renders.
Are your item components memoized though? Items that stay within the window shouldn't be re-rendered (IIRC) if they're memoized (via
React.useMemoorReact.PureComponent) and you make sure to key them on thevirtualItems[x].indexproperty, or something on the item data itself that is immutable.X7Becka commentedon Apr 18, 2021
Does maintainer watches the issues?
tannerlinsley commentedon Apr 18, 2021
Yep! Just prioritization. I’ll get to this issue soon.
piecyk commentedon Apr 18, 2021
Overall as @mogelbrod suggested this need to be handled by memoizing the row result. For example, extracting row to it's own component and wrapping it with
React.memo.piecyk commentedon Apr 19, 2021
Some quick points to consider when things start to be slow
pointer-eventswhen scrolling.https://codesandbox.io/s/react-virtual-performance-list-pmyo2
bestwebdeveloper commentedon Aug 14, 2021
@paulm17 Depending on how you serve images to a user. I guess there is a url in a src. If yes, then there is only browser caching may help. Another way is to convert images to a Blob on load and use this blob as a source for image instead of url then you will be able at least cache images after retrieving them, but this of cause will occupy more memory of the users.
paulm17 commentedon Aug 14, 2021
This is an old issue. I've actually dropped this lib and using react-window and also using indexDB as browser caching didn't help.
So I consider my solution as a solution to my issue, no need to reply. Will be unsubbing from this thread too. 😄
michael-land commentedon Aug 14, 2021
I end up use my own version react-virtual, I think this PR #164 also implement it.