javascript 37 lines · 8 steps

How a virtualized list works in React

Render only the rows currently on screen so a huge list stays fast to scroll.

Explained by highlit

React Intermediate virtualization performance memoization scrolling

1import { useRef, useState, useCallback, useMemo } from 'react';
2 
3export function VirtualList({ items, rowHeight = 40, height = 600, overscan = 5, renderRow }) {
const [scrollTop, setScrollTop] = useState(0);
const containerRef = useRef(null);
6 
const handleScroll = useCallback((e) => {
  setScrollTop(e.currentTarget.scrollTop);
}, []);
10 
const { startIndex, endIndex, offsetY } = useMemo(() => {
  const visibleCount = Math.ceil(height / rowHeight);
  const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
  const end = Math.min(items.length, start + visibleCount + overscan * 2);
  return { startIndex: start, endIndex: end, offsetY: start * rowHeight };
}, [scrollTop, height, rowHeight, overscan, items.length]);
17 
const visibleItems = items.slice(startIndex, endIndex);
19 
return (
  <div
    ref={containerRef}
    onScroll={handleScroll}
    style={{ height, overflowY: 'auto', position: 'relative' }}
  >
    <div style={{ height: items.length * rowHeight }}>
      <div style={{ transform: `translateY(${offsetY}px)` }}>
        {visibleItems.map((item, i) => (
          <div key={startIndex + i} style={{ height: rowHeight }}>
            {renderRow(item, startIndex + i)}
          </div>
        ))}
      </div>
    </div>
  </div>
);
37}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Rendering only the visible slice keeps DOM size constant no matter how many items exist.
2A full-height spacer preserves the real scrollbar while a translate offset positions the rendered window.
3Overscan renders a few extra rows beyond the viewport to hide blank flashes during fast scrolling.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);