Wrappercomponents, one for each entity listed while scrolling, that handle both the route updating and fetching of the next entity.
useInfiniteScrollhooks used internally.
useArchiveInfiniteScrollis designed to be used inside an
Archivecomponent. That component would render all the archive pages from the
pagesreturned by the hook.
pagesarray has the following structure:
fallbackprop ―both links―, to specify the source of the post entities. If none of them is specified,
state.source.postsPageis used. When the penultimate post of the first page is rendered, the next page of the archive is fetched. A list of the fetched pages is stored in the browser history state along with the list of posts.
limitprop in this case stands for the number of posts being shown, not the number of fetched pages (as in the case of
useArchiveInfiniteScroll). In the same way, the
fetchNextshows the next post, and only fetches the next page of posts if needed.
postsarray has the following structure:
nextLink, and returns two React refs that should be attached to react elements. The hook uses
useInViewinternally to track the visibility of those elements and trigger an
actions.router.setto update the current link or an
actions.source.fetchto fetch the next entity. You can pass options for these
useInViewhooks as well, using the
useInfiniteScrollalso keeps a record of the fetched & ready entities in the browser history state, in order to restore the list when you go back and forward while navigating. That record is accessible from the browser history state under the
Wrappercomponent that would wrap the entity pointed by