How does virtualization work in React lists?

Short answer: Virtualization is a technique where only the items that are visible in the viewport are rendered, while the others are not rendered until they come into view.

Explain a bit more

This significantly reduces the number of DOM nodes and boosts performance when rendering large lists. Popular libraries for virtualization in React include: react-window react-virtualized Example with react-window: import { FixedSizeList as List } from 'react-window'; function MyList({ items }) { return ( <List height={400} itemCount={items.length} itemSize={35} width={300} {({ index, style }) => ( <div style={style}>{items[index]}</div> )} </List> ); } Only the visible items will be rendered, and as the user scrolls, new items will be loaded dynamically.

Real-world example (ShopNest)

When rendering cart lines, use a stable key={item.id}—not the array index—so React updates the right row after delete.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.