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 to solve the troubles. DOM recycling Fortunately, there're 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. some great libraries 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 , it's a tiny (~ 2.9kB gzipped) React that can help us achieve that as follows: React Cool Virtual hook 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. to explore more useful features! Check it out
