Virtualized List Component

Design a list component that can render thousands of items without performance issues.

R - Requirements

Key Questions:

• How many items? (100, 1k, 10k, 100k+)
• Fixed or variable item height?
• Horizontal or vertical scroll?
• Animations needed? (add, remove, reorder)
• Infinite scroll or pagination?

Common Answers:

• Small (< 100): Render all, no virtualization
• Medium (100-1k): Virtual scrolling
• Large (1k+): Virtual scrolling + infinite scroll

A - Architecture

Virtualization Flow:

Component Architecture:

Architecture Decisions:

• Windowing/Virtualization - Only render visible items (saves memory, improves performance)
• Fixed vs Dynamic height - Fixed is simpler, dynamic requires height measurement
• Infinite scroll vs pagination (infinite scroll for feeds, pagination for tables)

Relevant Content:

• Windowing Virtualization - Core technique
• Infinite Scroll Observer - Load more on scroll

D - Data Model

State Management:

• Visible range (start, end indices)
• Scroll position
• Item heights (for dynamic)
• Loading states (initial, loading more, error)

Caching:

• Render cache (keep rendered items in memory)
• Data cache (prefetch next page)

Relevant Content:

• Data Fetching Strategies - Pagination, caching
• Caching Patterns - Cache strategies

I - Interface

Features:

• Skeleton loaders (initial load)
• Loading indicators (loading more)
• Empty states
• Error states
• Scroll indicators (top/bottom)

Accessibility:

• Keyboard navigation (arrow keys, page up/down)
• Screen reader announcements
• Focus management on scroll

Relevant Content:

• Placeholder Strategies - Skeleton screens
• Accessibility Patterns - A11y requirements

O - Optimizations

Performance:

• Virtual scrolling - Only render visible items
• Memoization - Prevent unnecessary re-renders
• FLIP animations - Smooth add/remove animations
• Deep object memoization - For complex item data

Rendering:

• List animation performance - 60fps animations
• Paint optimization - Reduce paint operations
• Composite layers - GPU acceleration

Data:

• Prefetch next page - Load before user scrolls
• Request deduplication - Avoid duplicate fetches

Relevant Content:

• List Animation Performance - Smooth animations
• FLIP Animations - Animation technique
• Deep Object Memoization - Memoization patterns
• Paint Optimization - Reduce paint time

Implementation Checklist

• Virtual scrolling algorithm (fixed height)
• Dynamic height support (if needed)
• Scroll position restoration
• Infinite scroll detection
• Skeleton loaders
• Keyboard navigation
• Memoization (React.memo, useMemo)
• Animation performance (FLIP)
• Prefetch next page
• Error handling and retry

Common Pitfalls

❌ Rendering all items → Performance issues, memory problems
✅ Virtual scrolling - only render visible + buffer

❌ No memoization → Unnecessary re-renders
✅ Memoize items, use React.memo, useMemo for expensive calculations

❌ No prefetching → Users wait for next page
✅ Prefetch next page when 80% scrolled

❌ Janky animations → Poor UX
✅ Use FLIP, requestAnimationFrame, GPU acceleration