I was already using the (also excellent)
react-window for this purpose.
react-window does the virtualising job and does it very well indeed However, I was both intrigued by the lure of the new shiny thing. I've also never been the biggest fan of
react-window's API. So I tried switching over from
react-virtual as an experiment. To my delight, the experiment went so well I didn't look back!
What did I get out of the switch?
- Simpler code / nicer developer ergonomics. The API for
react-virtualallowed me to simplify my code and lose a layer of components.
- TypeScript support in the box
- Improved perceived performance. I didn't run any specific tests to quantify this, but I can say that the same functionality now feels snappier.
I tweeted my delight at this and Tanner asked if there was commit diff I could share. I couldn't as it's a private codebase, but I thought it could form the basis of a blogpost.
Nice! Do you have a commit diff we could see?
— Tanner Linsley ⚛️ (@tannerlinsley) May 10, 2020
In case you hadn't guessed, this is that blog post...
So what does the change look like? Well first remove
react-window from your project:
Add the dependency to
Change your imports from:
Change your component code from:
Of the above you can delete the
ListItemProps type and the associate
RenderRow function. You won't need them again! There's no longer a need to pass down data to the child element and then extract it for usage; it all comes down into a single simpler component.
ImportantDataList component with this:
And you are done! Thanks Tanner for this tremendous library!