React-window: Insane amount of re-renders when scrolling 1 items into viewport

[jennyjkim95]

I went into the codesandbox example here: https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/fixed-size-list-vertical

And updated the code to console.log the index whenever a row was rendered & noticed an alarming amount of re-renders in the browser console:

I noticed this while using FixedSizeList in my project as well. Am I missing something here or is there a bug w/ the list virtualization?

[phoenisx]

@jennyjkim95 Have you tried this?

https://react-window.now.sh/#/examples/list/memoized-list-items

[jennyjkim95]

@Shub1427 that seems to fix the mass re-rendering problem! I thought that would be baked into FixedSizeList since:

React window works by only rendering part of a large data set (just enough to fill the viewport).

Looking at the GIF I noticed that only a couple of the rows (the ones in the viewport) were rendering but they were just re-rendering an insane amount.

Thank you for the memoized suggestion 💯

[phoenisx]

One more thing to note, u might have to use a custom areEqual implementation for React.memo, if the passed list items reference changes, but inner structure is still the same, so as to keep less re-renders

[jennyjkim95]

Thanks for the heads up! Will do