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.
React Cool Virtual is more powerful than you think. Check it out to explore more useful features!