Hackernoon logoReact Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook by@welly

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

React Cool Virtual is a tiny (~ 2.9kB gzipped React hook that can help us achieve infinite scroll. It's a tiny (2.9MB) hook that lets you 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 going to be more powerful than you think. Check it out to explore more useful features!
image
welly Hacker Noon profile picture

welly

Code x Design ✨

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... 🪄

image

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.