In this tutorial video, we will be creating an infinite scroll component using React Query. This includes using the `useInfiniteQuery` hook to query a paginated API, and the `queryItems` function to fake an API. We'll also discuss the use of `getNextPageParam` to get the page parameter for the query function, the data format coming from the hook, converting the data to a plain list using `usePaginatedResultItems`, and the creation of a `PaginatedView` component to display the loader and request new items on scroll. Lastly, this tutorial covers the use of Intersection Observer API for determining if a user has scrolled to the end of a list.
Demo: https://kit.radzion.com/infinite-scroll
Source code: https://github.com/radzionc/radzionkit
Accelerate your work and reach your goals faster with https://increaser.org – where deep work, time mastery, and habit shaping converge for your success! 💪🚀
Watch video Infinite Scroll Component with React Query online, duration hours minute second in high quality that is uploaded to the channel Radzion Dev 02 October 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 2,210 times and liked it 23 visitors.