Skip to main content
Version: Current

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>
);
}