fetch new data in hasMore

[ALi-Hosseinzad]

How is it possible to fetch new data from the new API again in the ‍hasMore ?

[buzinas]

You need to add the API call as a side effect that depends on page returned by the hook. And you also need a component that renders in case hasMore is true. Look at the example below:

import React from 'react';
import useInfiniteScroll from '@closeio/use-infinite-scroll';

export default function MyComponent() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [page, loaderRef, scrollerRef] = useInfiniteScroll({ hasMore });

  // This effect runs every time `page` changes
  useEffect(async () => {
    const data = await myApiCall({ page });
    setHasMore(data.hasMore);
    setItems(prev => [...prev, data.items]);
  }, [page]);

  return (
    <div ref={scrollerRef}>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      // The `<div>` below will only render if `hasMore` is `true`. Our hook
      // observes this `<div>` and as soon as it gets visible on the screen, we
      // change the `page`, which triggers the effect again, re-fetching the API.
      {hasMore && <div ref={loaderRef}>Loading…</div>}
    </div>
  );
}