Implementing Fixed-size List with React-Window
Show how to create a fixed-size list using React-Window, focusing on the 'FixedSizeList' component and its key props for optimal performance.
import React from 'react';
import { FixedSizeList } from 'react-window';
Import React and the FixedSizeList component from react-window.
const Row = ({ index, style }) => (
<div style={style}>
{/* Render your item using index to access the item data */}
`Item ${index}`
</div>
);
Define the Row component that will render each item in the list. Use the style and index props for styling and accessing the item respectively.
const ListComponent = () => {
const items = new Array(1000).fill(null).map((_, index) => `Item ${index}`);
return (
<FixedSizeList
height={500}
width={300}
itemSize={35}
itemCount={items.length}
>
{Row}
</FixedSizeList>
);
};
Create the ListComponent that renders the FixedSizeList. Define the height, width, itemSize, and itemCount props to control the list's appearance and behavior.
export default ListComponent;
Export the ListComponent so it can be used elsewhere in your application.