react-static-container VS react-virtualized

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