How can I optimize rendering of divs to display only a few at a time without performance issues

Question

With the help of code, can you tell me how I can optimize the rendering of divs to display only a few at a time without performance issues?

Answer 1

To optimize the rendering of a large number of <div> elements in React and display only a few at a time without performance issues, you can implement virtual scrolling (also known as windowing). This technique involves rendering only the elements currently visible in the viewport, thereby reducing the number of DOM nodes and enhancing performance.

Implementing Virtual Scrolling with react-window:

One popular library for virtual scrolling in React is react-window. It provides components that efficiently render large lists by only rendering the items visible in the viewport.

Steps to Implement:

Install react-window:

npm install react-window

Use FixedSizeList Component:

import React from 'react';

import { FixedSizeList as List } from 'react-window';

const items = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);

function VirtualizedList() {

  return (

    <List

      height={400} // Height of the list container

      itemCount={items.length}

      itemSize={35} // Height of each item

      width={300} // Width of the list container

    >

      {({ index, style }) => (

        <div style={style}>

          {items[index]}

        </div>

      )}

    </List>

  );

}

export default VirtualizedList;