How can I improve performance when rendering 1000+ elements in React?

Home

Community

Collections

How can I improve performance when rendering 1000+ elements in React?

asked about 1 year ago

152

I am building a list-heavy application (like a file explorer or chat app) in React. Rendering over 1000 DOM elements is laggy. What are some performance optimization techniques I can use to make the UI smooth and responsive?

React

javascript

typescript

1 Answer

Janriz Mathew Libres

• answered about 1 year ago

Use a technique called windowing or virtualization. Libraries like react-window or react-virtualized can help:

1npm install react-window

1npm install react-window

Example usage:

1import { FixedSizeList as List } from 'react-window';
2
3const Row = ({ index, style }) => (
4  <div style={style}>Row {index}</div>
5);
6
7<List height={500} itemCount={1000} itemSize={35} width={300}>
8  {Row}
9</List>

1import { FixedSizeList as List } from 'react-window';
2
3const Row = ({ index, style }) => (
4  <div style={style}>Row {index}</div>
5);
6
7<List height={500} itemCount={1000} itemSize={35} width={300}>
8  {Row}
9</List>

This renders only the items visible in the viewport, improving performance drastically.