Rendering Large Lists: Infinite Scroll vs. Virtual Scrolling Across Frameworks
These libraries solve the problem of displaying large datasets in web applications without crashing the browser. ngx-infinite-scroll and react-infinite-scroll-component focus on loading more data as the user scrolls, appending new items to the DOM. In contrast, ngx-virtual-scroller, react-virtualized, react-window, and vue-virtual-scroller use virtualization to render only the visible items, recycling DOM nodes to maintain performance regardless of list size. Choosing between them depends on whether you need to load data dynamically or simply render a large static dataset efficiently.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Rendering Large Lists: Infinite Scroll vs. Virtual Scrolling Across Frameworks
When building data-heavy applications, rendering thousands of items can freeze the browser. Developers typically choose between two strategies: Infinite Scroll (loading more data as you go) and Virtual Scrolling (rendering only what fits on screen). The packages ngx-infinite-scroll, ngx-virtual-scroller, react-infinite-scroll-component, react-virtualized, react-window, and vue-virtual-scroller each tackle this problem in different ways. Let's compare how they work under the hood.
🗂️ Core Mechanism: Appending vs. Windowing
Infinite Scroll packages (ngx-infinite-scroll, react-infinite-scroll-component) focus on data fetching.
- They listen for scroll events near the bottom of the page.
- When triggered, they call a callback to load more items.
- The DOM grows continuously as more data arrives.
<!-- ngx-infinite-scroll: Angular Template -->
<div infiniteScroll [infiniteScrollDistance]="2" (scrolled)="loadMore()">
<div *ngFor="let item of items">{{ item.name }}</div>
</div>
// react-infinite-scroll-component: React Component
<InfiniteScroll
dataLength={items.length}
next={loadMore}
hasMore={true}
>
{items.map(item => <div key={item.id}>{item.name}</div>)}
</InfiniteScroll>
Virtual Scroll packages (ngx-virtual-scroller, react-virtualized, react-window, vue-virtual-scroller) focus on DOM management.
- They calculate which items are visible in the viewport.
- They render only those items, using placeholders for the rest.
- The DOM size stays constant even if the dataset has millions of rows.
<!-- ngx-virtual-scroller: Angular Template -->
<virtual-scroller [items]="allItems" #scroll>
<div *ngFor="let item of scroll.viewPortItems">{{ item.name }}</div>
</virtual-scroller>
// react-window: React Component
<FixedSizeList height={500} itemCount={allItems.length} itemSize={35}>
{({ index, style }) => (
<div style={style}>{allItems[index].name}</div>
)}
</FixedSizeList>
// react-virtualized: React Component (Legacy)
<List
width={500}
height={500}
rowCount={allItems.length}
rowHeight={35}
rowRenderer={({ index, style }) => (
<div key={allItems[index].id} style={style}>{allItems[index].name}</div>
)}
/>
<!-- vue-virtual-scroller: Vue Component -->
<recycle-scroller :items="allItems" :item-size="35">
<template v-slot="{ item }">
<div>{{ item.name }}</div>
</template>
</recycle-scroller>
⚡ Performance: DOM Nodes vs. Network Requests
Infinite Scroll saves initial load time but risks long-term slowdowns.
- Great for feeds where users rarely scroll to the very bottom.
- If a user scrolls through 10,000 items, the DOM will eventually lag.
- Best when data must be fetched from a server in pages.
// ngx-infinite-scroll: Callback triggers network request
loadMore() {
this.api.getPage(this.currentPage++).subscribe(newItems => {
this.items = [...this.items, ...newItems]; // DOM grows
});
}
// react-infinite-scroll-component: Callback triggers network request
const loadMore = () => {
fetchMoreData().then((newItems) => {
setItems([...items, ...newItems]); // DOM grows
});
};
Virtual Scroll saves memory and keeps scrolling smooth.
- Great for large datasets already loaded in memory (e.g., filtered results).
- Scrolling remains 60fps even with 100,000 items.
- Best when you need to jump to specific positions quickly.
// ngx-virtual-scroller: Handles DOM recycling internally
// No manual network logic needed in the template
// Items are passed as a full array
@ViewChild('scroll') scroll: VirtualScrollerComponent;
// react-window: Handles DOM recycling internally
// Only renders visible rows
// No manual DOM management needed
// react-virtualized: Handles DOM recycling internally
// Similar to react-window but with heavier bundle
// vue-virtual-scroller: Handles DOM recycling internally
// Uses requestAnimationFrame for smooth updates
⚠️ Maintenance Status: Legacy vs. Modern
react-virtualized is a powerful library but is considered legacy.
- It is in maintenance mode and no longer receives major feature updates.
- The author recommends
react-windowfor most new use cases. - It is still valid for complex grids but adds unnecessary weight for simple lists.
// react-virtualized: Requires importing heavy components
import { List } from 'react-virtualized';
// Bundle size is significantly larger than react-window
react-window is the modern standard for React virtualization.
- It is smaller, faster, and actively maintained.
- It splits features into smaller packages (e.g.,
FixedSizeList,VariableSizeGrid). - Choose this for any new React project needing virtualization.
// react-window: Lightweight imports
import { FixedSizeList } from 'react-window';
// Optimized for tree-shaking and modern bundlers
Angular and Vue options are currently stable.
ngx-infinite-scrollandngx-virtual-scrollerare the standard choices for Angular.vue-virtual-scrolleris the community standard for Vue 2 and 3.- None are deprecated, but ensure you pick the version matching your framework.
<!-- ngx-infinite-scroll: Works with Angular 15+ -->
<div infiniteScroll [infiniteScrollContainer]="container"></div>
<!-- vue-virtual-scroller: Works with Vue 3 -->
<recycle-scroller :items="items" :item-size="50" />
📊 Summary: Key Differences
| Feature | Infinite Scroll Packages | Virtual Scroll Packages |
|---|---|---|
| Primary Goal | Load more data on scroll | Render fewer DOM nodes |
| DOM Growth | Grows continuously | Stays constant |
| Best For | Feeds, Search Results, Social Media | Data Grids, Dropdowns, Large Tables |
| Data Source | Server-side pagination | Client-side array |
| Complexity | Low (Wrapper component) | Medium (Requires item sizing) |
| Package | Framework | Type | Status |
|---|---|---|---|
ngx-infinite-scroll | Angular | Infinite | Active |
ngx-virtual-scroller | Angular | Virtual | Active |
react-infinite-scroll-component | React | Infinite | Active |
react-virtualized | React | Virtual | Legacy / Maintenance |
react-window | React | Virtual | Active / Recommended |
vue-virtual-scroller | Vue | Virtual | Active |
💡 The Big Picture
Infinite Scroll packages (ngx-infinite-scroll, react-infinite-scroll-component) are like a conveyor belt 📦 — they keep bringing new items as you need them. Use them when your data lives on a server and you want to save bandwidth by loading pages on demand.
Virtual Scroll packages (ngx-virtual-scroller, react-window, vue-virtual-scroller) are like a viewport camera 📷 — they only show what is in frame. Use them when you have the data but need to keep the browser fast by limiting DOM nodes.
Final Thought: For React developers, prefer react-window over react-virtualized for new work. For Angular and Vue, the choice is simply between loading more data (Infinite) or rendering less DOM (Virtual). Match the tool to your data strategy.
How to Choose: ngx-infinite-scroll vs ngx-virtual-scroller vs react-infinite-scroll-component vs react-virtualized vs react-window vs vue-virtual-scroller
- ngx-infinite-scroll:
Choose
ngx-infinite-scrollfor Angular applications where you need to load data in chunks as the user scrolls down. It is best suited for feeds, search results, or social media timelines where the total dataset size is unknown or too large to load at once. Avoid it if you already have all the data locally and just need to render it efficiently. - ngx-virtual-scroller:
Choose
ngx-virtual-scrollerfor Angular projects that need to render a large, fixed dataset without lag. It is ideal for dropdowns, data grids, or contact lists where all items are available but rendering them all would slow down the app. It keeps the DOM light by only showing what is visible on screen. - react-infinite-scroll-component:
Choose
react-infinite-scroll-componentfor React apps that require a simple, wrapper-based approach to loading more data on scroll. It works well for blogs, news feeds, or e-commerce product listings where pagination is handled by fetching new pages. It is easier to set up than virtualizers but does not solve DOM bloat if data accumulates. - react-virtualized:
Choose
react-virtualizedonly if you are maintaining a legacy React codebase that already depends on it. For new projects, avoid this package as it is heavier and less actively developed than modern alternatives. It offers complex features like variable height rows, butreact-windowis generally preferred for new work. - react-window:
Choose
react-windowfor new React projects that need high-performance rendering of large lists or grids. It is lighter and more modular thanreact-virtualized, making it easier to bundle and maintain. Use it when you have a large dataset in memory and need to ensure smooth scrolling without DOM overload. - vue-virtual-scroller:
Choose
vue-virtual-scrollerfor Vue applications that need to handle long lists efficiently. It provides components likeRecycleScrollerthat work seamlessly with Vue's reactivity system. It is the go-to choice for Vue developers facing performance issues with largev-forloops.
Popular Comparisons
README for ngx-infinite-scroll
Consider Becoming a sponsor
Angular Infinite Scroll
versions now follow Angular's version to easily reflect compatibility.
Meaning, for Angular 10, use ngx-infinite-scroll @ ^10.0.0
Angular - Older Versions Support
Starting Angular 6 and Above - ngx-infinite-scroll@THE_VERSION.0.0
For Angular 4 and Angular = ^5.5.6 - use version ngx-infinite-scroll@0.8.4
For Angular 5.x with rxjs =<5.5.2 - use version ngx-infinite-scroll@0.8.3
For Angular version <= 2.3.1, you can use npm i angular2-infinite-scroll (latest version is 0.3.42) - please notice the angular2-infinite-scroll package is deprecated
Used By
and much more.
These analytics are made available via the awesome Scarf package analytics library
Opt-Out Of Scarf
Scarf can be disabled by following these directions
Front End Consulting Services
I'm a Senior Front End Engineer & Consultant at Orizens. My services include:
- Angular/React/Javascript Consulting
- Front End Architecture Consulting
- Project Code Review
- Project Development
Installation
npm install ngx-infinite-scroll --save
Supported API
Properties
| @Input() | Type | Required | Default | Description |
|---|---|---|---|---|
| infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
| infiniteScrollUpDistance | number | optional | 1.5 | should get a number |
| infiniteScrollThrottle | number | optional | 150 | should get a number of milliseconds for throttle. The event will be triggered this many milliseconds after the user stops scrolling. |
| scrollWindow | boolean | optional | true | listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll. |
| immediateCheck | boolean | optional | false | invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled) |
| infiniteScrollDisabled | boolean | optional | false | doesn't invoke the handler if set to true |
| horizontal | boolean | optional | false | sets the scroll to listen for horizontal events |
| alwaysCallback | boolean | optional | false | instructs the scroller to always trigger events |
| infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |
| fromRoot | boolean | optional | false | if infiniteScrollContainer is set, this instructs the scroller to query the container selector from the root of the document object. |
Events
| @Output() | Type | Event Type | Required | Description |
|---|---|---|---|---|
| scrolled | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
| scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up. |
Behavior
By default, the directive listens to the window scroll event and invoked the callback.
To trigger the callback when the actual element is scrolled, these settings should be configured:
- [scrollWindow]="false"
- set an explict css "height" value to the element
DEMO
Usage
In this example, the onScroll callback will be invoked when the window is scrolled down:
import { Component } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
@Component({
selector: 'app',
template: `
<div
class="search-results"
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50"
(scrolled)="onScroll()"
></div>
`,
imports: [InfiniteScrollDirective]
})
export class AppComponent {
onScroll() {
console.log('scrolled!!');
}
}
in this example, whenever the "search-results" is scrolled, the callback will be invoked:
import { Component } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
@Component({
selector: 'app',
styles: [
`
.search-results {
height: 20rem;
overflow: scroll;
}
`,
],
template: `
<div
class="search-results"
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50"
(scrolled)="onScroll()"
[scrollWindow]="false"
></div>
`,
imports: [InfiniteScrollDirective]
})
export class AppComponent {
onScroll() {
console.log('scrolled!!');
}
}
In this example, the onScrollDown callback will be invoked when the window is scrolled down and the onScrollUp callback will be invoked when the window is scrolled up:
import { Component } from '@angular/core';
import { InfiniteScroll } from 'ngx-infinite-scroll';
@Component({
selector: 'app',
directives: [InfiniteScroll],
template: `
<div
class="search-results"
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollUpDistance]="1.5"
[infiniteScrollThrottle]="50"
(scrolled)="onScrollDown()"
(scrolledUp)="onScrollUp()"
></div>
`,
})
export class AppComponent {
onScrollDown() {
console.log('scrolled down!!');
}
onScrollUp() {
console.log('scrolled up!!');
}
}
In this example, the infiniteScrollContainer attribute is used to point directive to the scrollable container using a css selector. fromRoot is used to determine whether the scroll container has to be searched within the whole document ([fromRoot]="true") or just inside the infiniteScroll directive ([fromRoot]="false", default option).
import { Component } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
@Component({
selector: 'app',
styles: [
`
.main-panel {
height: 100px;
overflow-y: scroll;
}
`,
],
template: `
<div class="main-panel">
<div
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50"
[infiniteScrollContainer]="selector"
[fromRoot]="true"
(scrolled)="onScroll()"
></div>
</div>
`,
imports: [InfiniteScrollDirective]
})
export class AppComponent {
selector: string = '.main-panel';
onScroll() {
console.log('scrolled!!');
}
}
It is also possible to use infiniteScrollContainer without additional variable by using single quotes inside double quotes:
[infiniteScrollContainer]="'.main-panel'"
Showcase Examples
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! 🙏 [Become a backer]
Sponsors
