Why virtualize large lists in React?

Rendering thousands of DOM nodes drives memory use and paint costs sky-high. Virtualization (a.k.a. windowing) keeps only the visible subset of items mounted, shrinking the number of DOM nodes and dramatically cutting layout and paint time. For data-heavy UIs—feeds, logs, tables—virtualization is often the difference between janky and smooth scrolling.

Virtualization also reduces React reconciliation work. When only a small window of rows is mounted, React’s diffing and re-rendering scope becomes manageable even with complex row components. That means lower CPU usage on both desktop and mobile devices.

Finally, virtualization enables performance-focused features like infinite scroll, row recycling, and low-latency updates. The UX gains compound: faster initial paint, better frame rates during scroll, and more predictable memory behavior across devices.

Choosing the right library: react-list vs alternatives

There are multiple libraries for list virtualization in React: react-window and react-virtualized (by Brian Vaughn) are widely used, while react-list emphasizes a small surface area and flexible support for variable-height items.

react-window excels for fixed-height rows and minimal API overhead; react-virtualized offers a rich set of components (Grids, CellMeasurer, etc.). react-list sits between: it’s compact and practical when you need either fixed or variable heights without pulling in a heavy dependency tree.

Pick react-list if you want a lightweight, focused tool for lists and need direct control over item measuring or custom scroll containers. Use react-window for huge performance wins with fixed-height lists, and react-virtualized when you need a full suite of virtualization components.

For comparison and further reading: check react-window (https://github.com/bvaughn/react-window) and the React docs on performance (https://reactjs.org/docs/optimizing-performance.html).

Implementing react-list: Installation and setup

Install react-list from npm or Yarn. The package exposes a small API and integrates with custom scroll containers. It supports both fixed-height and variable-height rows via callbacks.

// npm
npm install react-list

// yarn
yarn add react-list
  

In a typical project, import the component and provide a renderItem function. You’ll choose one of the modes: ‘uniform’ (fast, fixed heights) or ‘variable’ (measured or estimated heights). For many apps, starting in ‘uniform’ and migrating to ‘variable’ only when needed gives the best trade-off between simplicity and correctness.

Set a container style with explicit height (or use a flex layout) so the virtualization component has a viewport to compute the visible window. If you use a non-window scroll container, pass it to the list component so offsets are computed correctly.

Core concepts: windowing, variable heights, and recycling

Windowing defines two parameters: window size (number of items mounted) and buffer (extra items above/below viewport). A larger buffer reduces visible pop-in when fast scrolling; a smaller buffer minimizes memory and DOM churn. Tune buffer size based on row complexity and target device capacity.

Variable-height rows are the hard part: virtualization must either measure rows as they’re rendered or estimate heights and correct over time. Strategies include: 1) measuring via refs after mount, 2) using an external size cache, or 3) providing an estimatedHeight function that refines as items mount.

Recycling reuses DOM nodes for different data indexes to minimize mount/unmount costs. Not all libraries expose explicit recycling controls, but react-list can be asked to render a sliding window of rows which effectively reuses DOM elements if your render function is performant and keys are stable.

Advanced patterns: Infinite scroll, dynamic heights, and performance tips

Infinite scroll with virtualization requires careful coordination: append data to your source array and let the virtualized list update. Avoid forcing a full reflow—append and preserve scroll offset. If you add items at the top, ensure you capture and restore the scroll position to prevent jank.

For dynamic heights, implement a size cache keyed by item ID. On first render measure and store the height; on subsequent renders reuse the cache. Use a mutation observer or ResizeObserver for items that change size after initial paint (e.g., images loading).

Performance tips: memoize row renderers to avoid re-rendering unchanged rows, avoid inline object/array props that change each render, throttle expensive scroll handlers, and prefer requestAnimationFrame for visual updates. Profile with your browser’s performance panel to find paint/layout hotspots.

• Quick performance checklist: stable keys, memoized rows, size cache, appropriate buffer, and browser profiling.

Example: react-list implementation (production-ready)

The example below demonstrates a variable-height react-list with measurement, a size cache, and infinite loading. It uses a simple ResizeObserver-based measurement and appends data when the user nears the bottom.

import React, {useRef, useState, useEffect, useCallback} from "react";
import ReactList from "react-list";

function useSizeCache() {
  const cache = useRef(new Map());
  return {
    get: id => cache.current.get(id),
    set: (id, h) => cache.current.set(id, h),
    clear: () => cache.current.clear()
  };
}

function MeasuredRow({index, data, sizeCache, onResize}) {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) return;
    const node = ref.current;
    const ro = new ResizeObserver(entries => {
      for (const e of entries) {
        const height = Math.ceil(e.contentRect.height);
        sizeCache.set(data[index].id, height);
        onResize && onResize(index);
      }
    });
    ro.observe(node);
    return () => ro.disconnect();
  }, [index, data, sizeCache, onResize]);

  const item = data[index];
  return (
    <div ref={ref} style={{padding:12, boxSizing:"border-box"}}>
      <h4>{item.title}</h4>
      <p>{item.body}</p>
    </div>
  );
}

export default function VirtualizedFeed() {
  const [items, setItems] = useState(generateInitialItems());
  const sizeCache = useSizeCache();
  const listRef = useRef();

  const renderItem = useCallback((index, key) => {
    return <MeasuredRow key={key} index={index} data={items}
                        sizeCache={sizeCache} onResize={()=> listRef.current && listRef.current.forceUpdate()} />;
  }, [items, sizeCache]);

  function handleScroll({scrollTop, scrollHeight, clientHeight}) {
    if (scrollTop + clientHeight >= scrollHeight - 300) {
      loadMoreItems();
    }
  }

  function loadMoreItems() {
    // append items; preserve scroll naturally
    setItems(prev => prev.concat(generateMoreItems(prev.length)));
  }

  return (
    <div style={{height:600, overflow:"auto"}} onScroll={(e)=>handleScroll(e.target)}>
      <ReactList
        ref={listRef}
        itemRenderer={renderItem}
        length={items.length}
        type="variable"
        useTranslate3d={true}
      />
    </div>
  );
}

Key takeaways: use a stable id-based height cache, measure with ResizeObserver, and trigger a reflow/update of the list only when necessary. The example uses a scroll container; when using window scrolling, pass the appropriate container references.

Linking to the original advanced discussion on react-list can provide useful implementation patterns and pitfalls: advanced list virtualization with react-list.

Testing and profiling scroll performance

Measure first. Use Chrome DevTools Performance to record scroll interactions and inspect frame times, scripting, and paint. Look for long tasks (>50ms) or repeated layout thrashing. These are your primary targets.

Use Lighthouse to check overall performance, but rely on the performance panel for micro-optimizations. Simulate slow devices and network conditions to ensure your virtualization strategy scales.

Write unit tests for your key behaviors: preserved scroll position when appending items, correct rendering near boundaries, and stable heights when reusing cache entries. End-to-end tests (Cypress/Playwright) help catch visual regressions under real scroll scenarios.

Accessibility and SEO considerations

Virtualized lists can break semantics if screen readers expect all items in DOM. Ensure the visible viewport contains meaningful landmarks, and provide an alternative view (e.g., «view all» or summarized content) for assistive tech when necessary.

Use aria-live regions for updates that must be announced, and keep focus management predictable when items are added or removed. For keyboard navigation, ensure focus moves to real DOM nodes and that tab order is intuitive.

For SEO, search engines may not index client-rendered, virtualized content. If content indexing is required, use server-side rendering (SSR) or prerendering for key pages. If SSR is not feasible, offer crawlable summaries or structured data for important items.

SEO micro-markup suggestion

Include FAQ structured data and Article schema for content pages. Below is the recommended JSON-LD snippet for the FAQ included on this page—add it to your head or body to help search engines generate rich results.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How does react-list handle variable-height items?",
      "acceptedAnswer": { "@type": "Answer", "text": "It can work in 'variable' mode by measuring items on mount (or using ResizeObserver) and maintaining a size cache to estimate offsets." }
    },
    {
      "@type": "Question",
      "name": "How do I implement infinite scroll with react-list?",
      "acceptedAnswer": { "@type": "Answer", "text": "Append data when the scroll position nears the bottom, preserve scroll offset, and trigger the list to update without forcing full reflows." }
    },
    {
      "@type": "Question",
      "name": "Is react-list better than react-window?",
      "acceptedAnswer": { "@type": "Answer", "text": "react-window is ideal for fixed-size lists. react-list is more flexible for variable heights and custom scroll containers; choose based on your needs." }
    }
  ]
}

Semantic core (grouped keywords)

Backlinks & further reading

Recommended references and helpful libraries:

• Advanced list virtualization with react-list — deep dive and community patterns.
• react-window — excellent where row heights are fixed and performance is critical.
• React performance optimization — official guidelines for memoization and profiling.

FAQ

How does react-list handle variable-height items?

react-list supports a variable mode where items are measured and offsets are computed based on actual heights. Best practice: maintain a size cache keyed by item ID, measure on mount (ResizeObserver works well), and update the cache so subsequent calculations are accurate. This reduces reflow and keeps scroll offsets stable.

How do I implement infinite scroll with react-list?

Detect when the user scrolls near the bottom (e.g., within 200–500px), then append new data to your items array. Preserve the current scroll offset where necessary (especially if prepending), and avoid forcing a full DOM reflow. Use throttling for scroll listeners and trigger list updates rather than full remounts.

Is react-list better than react-window or react-virtualized?

Each library has trade-offs. Use react-window for fixed-height lists and maximum simplicity/performance. Use react-virtualized if you need a rich component set. Choose react-list if you want a lightweight solution with good support for variable-height items and custom scroll containers. Base your decision on expected item variability, bundle size constraints, and feature needs.