Virtual React Example: Simple (List)

Github Codesandbox Stackblitz

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 VirtualScroller.attachitem.

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

const Item = memo<ListItemProps>(({ model, i }) => (
    <div
        ref={createListItemRef(model, i)}
        style={{ borderTop: "2px solid #ccc", padding: "0.6em" }}
    >
        row {i}
    </div>
));

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

    return <List model={rows}>{Item}</List>;
};

export default SimpleList;