af-utils / virtual

List / Simple

Loading example...

row 0

row 1

row 2

row 3

row 4

row 5

row 6

row 7

import { memo } from "react";
import { useVirtual, List } from "@af-utils/react-virtual-list";

const Item = memo(({ i, model }) => (
    <div ref={el => model.el(i, el)} className="border-t p-2 border-zinc-400">
        row {i}
    </div>
));

const SimpleList = () => {
    const rows = useVirtual({
        itemCount: 250000
    });

    return (
        <List className="h-full" model={rows}>
            {Item}
        </List>
    );
};

export default SimpleList;

Virtual scroll can be used to render huge lists without performance problems. All dimensions are calculated automatically. Just provide itemcount and notify model about new elements with the help of el.