Infinite Scroll With React Query - Everything You Need To Know (Mutations, Intersection Observer)
Learn how to implement infinite scroll with React Query's useInfiniteQuery hook and the react-intersection-observer library. You'll also learn how to add new items to your list efficiently without refetching all pages.
Starting code: https://github.com/codinginflow/infinite-scroll-react-query/tree/Starting-point
Finished project: https://github.com/codinginflow/infinite-scroll-react-query
⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter…
Watch on YouTube ↗
(saves to browser)
Chapters (9)
Introduction
0:50
Starting code overview + setup
3:37
React Query installation + setup (QueryClientProvider, ReactQueryDevtools)
8:37
Server endpoint setup (cursor pagination)
18:06
Infinite loading with useInfiniteQuery (queryKey, queryFn, initialPageParam, g
36:00
Custom hook
38:17
react-intersection-observer setup (infinite scroll container)
46:13
Posting data with useMutation (variables, useQueryClient, invalidateQueries)
1:00:43
Cache updates with setQueryData (InfiniteData)
DeepCamp AI