What is the difference between Lazy Loading and List Virtualization in React?

Question

Recently for a project at work I recently implemented Lazy Loading for multiple list components that are being rendered at the same time, which caused performance issues. However, today I came across something on the React Docs called List Virtualization.

The package I'm currently using: https://www.npmjs.com/package/react-lazyload

One of the packages for List Virtualization recommended in the official docs: https://github.com/bvaughn/react-virtualized

If someone could please explain the difference between the two, I would highly appreciate it. Thanks

Answer 1

Arriving a bit late to the party, but I'll add my two cents here from what I personally gather is the difference broadly.

The idea of lazy loading is to make asynchronous calls to fetch new data (from an API endpoint, a store, etc) as it appears in the viewport. This improves the user experience as the user does not need to wait for all the data to load at once but only what is needed in the viewport. The social media platform Triller is a good example of a site that lazily loads content into the viewport to produce an infinite feed as a user scrolls. Lazy loading only concerns itself with fetching subsequent data and loading it into the viewport.

Virtualization is similar but renders only what is in the viewport. As previously fetched data leaves the viewport, so do those DOM nodes. This improves the user experience since a user who scrolls for a very long time would otherwise have many DOM nodes and, as a result, may notice a drop in performance. The social media platform Instagram is a good example of a site that makes use of virtualization for its feed. Only a handful of posts will remain loaded in the DOM while a user scrolls.

See diagrams below for a visual representation:

---