typescript 51 lines · 7 steps

How a virtualized list renders in React

A windowing component that renders only the rows in view, keeping large lists fast by drawing a handful of DOM nodes at a time.

Explained by highlit

React Advanced virtualization windowing performance requestanimationframe generics

1import { useCallback, useRef, useState } from "react";
2 
3interface VirtualListProps<T> {
items: T[];
rowHeight: number;
height: number;
overscan?: number;
renderRow: (item: T, index: number) => React.ReactNode;
9}
10 
11export function VirtualList<T>({
items,
rowHeight,
height,
overscan = 3,
renderRow,
17}: VirtualListProps<T>) {
const [scrollTop, setScrollTop] = useState(0);
const rafRef = useRef<number | null>(null);
20 
const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
  const next = e.currentTarget.scrollTop;
  if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
  rafRef.current = requestAnimationFrame(() => setScrollTop(next));
}, []);
26 
const totalHeight = items.length * rowHeight;
const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
const visibleCount = Math.ceil(height / rowHeight) + overscan * 2;
const endIndex = Math.min(items.length, startIndex + visibleCount);
const offsetY = startIndex * rowHeight;
32 
const visible = items.slice(startIndex, endIndex);
34 
return (
  <div
    onScroll={onScroll}
    style={{ height, overflowY: "auto", position: "relative" }}
  >
    <div style={{ height: totalHeight }}>
      <div style={{ transform: `translateY(${offsetY}px)` }}>
        {visible.map((item, i) => (
          <div key={startIndex + i} style={{ height: rowHeight }}>
            {renderRow(item, startIndex + i)}
          </div>
        ))}
      </div>
    </div>
  </div>
);
51}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Rendering only the visible slice keeps DOM node count constant regardless of list length.
2A full-height spacer plus a translated inner container preserves the scrollbar while shifting rows into place.
3Throttling scroll updates through requestAnimationFrame avoids re-rendering faster than the browser can paint.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';