React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook

When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. However, we can use the technique of DOM recycling to solve the troubles.

Fortunately, there're some great libraries already available but most of them are component-based solutions and it's not possible to implement the feature of infinite scroll (or lazily loading) through a single component. So the bundle size might be a concern.

Today, I want to show you how to build a virtualized list with infinite scroll by just using a hook. You might think: hmm... could it be possible? Yep! no kidding. Let's take a look.

We're going to use React Cool Virtual, it's a tiny (~ 2.9kB gzipped) React hook that can help us achieve that as follows:

You can turn on the browser's dev tool to see the effect of DOM recycling.

Now, you might say... 🪄

React Cool Virtual is more powerful than you think. Check it out to explore more useful features!