Select Page

AirNYT: React-Virtualized + Material UI Cards for Fast Lists

Published: July 11, 2022

What Did We Win?

What did we achieve with this slightly-confusing code? Let’s check the chrome console again:

The previous implementation had 329 requests and 29MB transferred, which took 8.46s to load:

The React-Virtualized example had 43 requests which transferred 3.6MB and loaded in 3.79s.

Using React-Virtualized allowed us to save a ton of bandwidth and user waiting time. Now if we could just get Soundcloud to do the same!

I hope this helped you understand the key points of using this incredible library. Upcoming tuts will get us back on track to finish up making this AirBnb clone.

Update: Brian Vaughn (the creator of React-Virtualized) submitted a pull request and showed how to do this tutorial using React-Window (a faster version of React-Virtualized):

That said, here is the code for this tutorial using React- Virtualized: