How to rendered a large list of data in NextJS

Rendering a large list of data in (NextJS) is always the tough job to do . we usually used the pagination technique for that, but at very large data pagination technique is also get failed.

For implement rendering of large list of data we used technique called “windowing” or “List virtualization”. at these we only render the data or data window which view to user viewport. because of this technique ,browser performance get improved and our large list of data get easily rendered without the lagging our app.

Steps to Implement the react-window.

1. Install these libraries.
react-virtualized-auto-sizer: It’s the HOC (Higher Order Component) which fills the space available to fits it child height and width.
react-window-infinite-loader: Basically it break down the large data into chunks and just-in-time loaded as they are scrolled into view.
react-window : It used for rendering the large list of data
Add this following library by run these command in your terminal.

npm i react-window

npm i react-virtualized-auto-sizer

npm i react-window-infinite-loader

2. Implement the React window in your app

import React, { useEffect, useState } from 'react';
import { FixedSizeList as List } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import AutoSizer from 'react-virtualized-auto-sizer';


export const Products = () => {
 
  const [productList, setProductList] = useState([]);
  
  useEffect(() => {
   const getProductList = async() => {
      const data = await // api call for product list
}
    getProductList();
  },[])


  return (
    <React.Fragment>
      <InfiniteLoader itemCount={productList.length}>
         {({onItemsRendered, ref }) => (
            <AutoSizer>
              {({ height, width }) => (                                  
             <List
               ref={ref}
               onItemsRendered={onItemsRendered}
               height={height}
               itemCount={prodctList.length}
               itemSize={30}
               width={width}>
               {({index, style }) => {
                    return (
                     <div style={style}>Row {index}</div>
                    );
               }}
           </List>
              )}
            </AutoSizer>
          </div>
        )}
      </InfiniteLoader>
    </React.Fragment>
  );
};

There are so many things is going on this code , let understand step by step.

first we implement the InfiniteLoader where we define the item.Count which is equal to the product.length and (onItemsRendered, ref) is used if you want to show any loader when user scroll down in product scrolling.

Second inside the Infinite Loader we implement the AutoSizer , where act as the resizer when the screen size get changed.

Third we used List component of the FixedSizeList of react-window , you can choose multiple types of component in react-window as per your need. you can check the available component at this react-window .

At List component we define the (ref , onItemsRendered) for define product loading loader. then we define height and width and pass the height and width of auto resize for manage resizing. and after that we add div container where we add style in the div container style. pls make sure to pass style of List into the div style.

Now we completed the implementation of the react-window for render large list of data.

Thanks for reading , If you like this blog you can check other blogs also on (React and NextJS)

Happy Coding !!