Infinity List

The Infinity List component is designed to manage large datasets by progressively displaying a subset of items, enhancing performance and user experience.

This component is especially useful in scenarios where loading the entire dataset at once is feasible, but displaying it all at once may overwhelm the user or the UI.

Quick Start

To start using the InfinityList component, import useInfinityList from the reablocks library and provide the items prop to the hook.

import { useMemo } from 'react';
import { useInfinityList } from 'reablocks';


export default function App() {
  const items = useMemo(() => [...Array(30).keys()], []);
  const { data, hasMore, showNext } = useInfinityList({ items });


  return (
    <div>
      {data.map(i => (
        <div key={i}>Item {i}</div>
      ))}
      {hasMore && <button onClick={() => showNext()}>Show More</button>}
    </div>
  );
}

Examples

The basic implementation uses the InfinityList component directly. This approach is straightforward, allowing you to map over your dataset and render each item within the InfinityList component:

Component

Hook

API