react-virtualized VS react-lazyload

React Virtualized, React Window (a light-weight alternative with smaller bundle size and simpler API), and React-Window-infinite-loader are node packages for implementing List Windowing in various contexts.

>But this does fall apart for very very large grids, as you get close to the height limit described in this article.

This was solved by a now unmaintained virtualization library that predates both of these libraries: https://github.com/bvaughn/react-virtualized

The react-virtualized library works around this issue by scaling the the scroll position it sets for a row based on the ratio of "max CSS height allowed by browser" to "computed height of all rows" if the latter is greater than the former: https://github.com/bvaughn/react-virtualized/blob/master/sou...

Make a demo with react-virtualized[0] and see if it crashes. Hint: It will not[1]. React can easily render 1 million rows with high performance without relying on WASM [2]

Here is the demo of react-virtualized[3], in which I entered 10m as the row count and scrolled to the bottom without crashing.

[0] https://github.com/bvaughn/react-virtualized

Ever built a list so long that your app crawled to a halt? Enter React Virtualized — a library that renders only what the user sees, not the entire dataset. It's the frontend equivalent of not reading an entire book just to quote a single line.

Resource: React Virtualized GitHub

Efficient rendering for large lists: Efficiently render massive lists and tables by showing only what’s visible in the viewport. 🚀 Boosts performance for large datasets. 🔗github.com/bvaughn/react-virtualized

To implement list virtualization in React, we can use one of two libraries: react-window or react-virtualized, both created by the same author. In this case, we will use react-window due to its simplicity.

1. React Virtualized

NOTE:- We can also use alternate approach like react-window and react-virtualized https://www.npmjs.com/package/react-virtualized

In this situation, lazy loading, a popular technique used to defer the loading of resources until needed, can be implemented to defer rendering a component unless the user scrolls down to bring it into the viewport. One of the most popular lazy loading libraries in React, react-lazyload, makes use of conditional rendering to render components only when they are scrolled into the viewport of the user's browser or, in other words, are visible to the user.

React LazyLoad is a library specifically built for that purpose. You just wrap your component, and this library takes care of the rest.

React-lazyload :

I'd you are using a frontend framework, you can use lazy loading that loads more content on scroll. For Vue: https://github.com/hilongjw/vue-lazyload For React: https://github.com/twobin/react-lazyload

Also, consider using react-lazyload or react-window or next.js dynamic import to handle your excessive dom size.