Infinite Scroll

Fetching elements into single list requires certain approach when writing component logic. At the moment, Hyper Fetch does not have a dedicated infinite pages hook.

---

Example

function Page({ offset }) {
  const { data, error, loading } = useFetch(getList.setQueryParams({ offset }));

  return (
    <div>
      {data.map((element) => (
        <div>{element}</div>
      ))}
    </div>
  );
}

function Component() {
  const [page, setPage] = useState(1);

  const loadMore = () => {
    setPage((page) => page + 1);
  };

  return (
    <div>
      {Array.from(Array(page).keys()).map((key) => (
        <Page key={key} offset={key * 10} />
      ))}
      <button onClick={loadMore}>Load More</button>
    </div>
  );
}