01 / Foundation
Understand the concept
Rendering thousands of DOM elements at once can significantly slow down an application.
Virtualization renders only the items currently visible in the viewport while efficiently reusing DOM nodes during scrolling.
02 / Implementation
Virtualized List
virtualization.tsx
import { FixedSizeList } from "react-window";
const Row = ({ index, style }) => (
<div style={style}>Item {index}</div>
);
export default function App() {
return (
<FixedSizeList
height={400}
width={300}
itemCount={10000}
itemSize={35}
>
{Row}
</FixedSizeList>
);
}04 / Interview