react-lazyload VS react-infinite

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.

react-infinite: my first attempt, abandoned because it needs to know the heights of all the elements in advance;

React Infinite (Higher barrier to entry due to complexity)