Samaila Bala
Jul 14, 2022 ⋅ 6 min read

Rendering large lists in React: 5 methods with examples

Samaila Bala I'm a frontend engineer and technical writer.

Recent posts:

Handling File Uploads In Next.js Using UploadThing

Handling file uploads in Next.js using UploadThing

Manage file uploads in your Next.js app using UploadThing, a file upload tool to be used in full-stack TypeScript applications.

Jude Miracle
Jun 21, 2024 ⋅ 15 min read
Exploring Advanced Support For Vite 5 In Storybook 8

Exploring advanced support for Vite 5 in Storybook 8

Explore the latest updates in Storybook 8, focusing on its improved support for Vite 5 as a build tool.

Will Soares
Jun 20, 2024 ⋅ 5 min read
Using Next Js With React Suspense To Create A Loading Component

Using Next.js with Suspense to create a loading component

Next.js 13 introduced some new features like support for Suspense, a React feature that lets you delay displaying a component until the children have finished loading.

Suraj Vishwakarma
Jun 19, 2024 ⋅ 9 min read
Exploring Angular 18's Redirectcommand Class And Let Block

Exploring Angular 18’s RedirectCommand class and @let block

Angular’s latest update brings greater control over redirects and the ability to define and assign variables within the template.

Lewis Cianci
Jun 19, 2024 ⋅ 6 min read
View all posts

3 Replies to "Rendering large lists in React: 5 methods with examples"

  1. Nice article. Just one question – In Infinite scroll approach, more items will keep on appending to the list until all the the items are downloaded. Wouldn’t it make the DOM heavy eventually thereby causing the performance issues again?

  2. Excellent Article here. The pagination example was not useful I had to build my own component from scratch. In reply to the. above comment, the items of the list are only rendered when they appear on the window because of scrolling the list. react-window must estimate the number of rows that can fit into the height of the screen and only that number of items are rendered

Leave a Reply