paint-brush
React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hookby@welly
4,986 reads
4,986 reads

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

by wellyJune 10th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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!
featured image - React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook
welly HackerNoon profile picture

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!