advanced
Virtualization
Render only visible rows or cells while preserving keyboard access, measurements, and scroll behavior.
Virtualization renders only visible rows plus a small overscan buffer, keeping DOM node count bounded for thousands of items. Libraries like react-window or TanStack Virtual measure or estimate row height, sync scroll position, and forward keyboard focus carefully.
Trade-offs include dynamic row heights, sticky headers, merged cells, and screen reader traversal of offscreen items. Combine with infinite loading for feeds.
On interviews, explain when virtualization pays off and what accessibility costs it introduces.
Common pitfalls include broken keyboard navigation, incorrect scroll height, and focus loss when rows unmount.
The trade-off is lower DOM cost versus measurement complexity and a11y edge cases.
Checklist:
- Mount visible window only.
- Plan for variable height and focus management.
- Test keyboard and scroll restoration.