Infinite Scroll in React - Full Tutorial

Learn how to implement infinite scroll functionality in React applications through this comprehensive tutorial video. Explore two different approaches: one using React hooks and another utilizing React Query. Dive into essential concepts such as custom hooks, Axios API setup, Intersection Observer, useCallback, and useInfiniteQuery. Follow along as the instructor guides you through building example components, setting up API calls, and testing the functionality. Gain practical knowledge on creating efficient and seamless infinite scrolling experiences in your React projects.

Syllabus

Intro
Welcome
Starter code and dependencies
Axios API setup
usePosts custom hook
Example 1 component
Post component and forwardRef
Applying useRef
Checking functionality
Intersection Observer and useCallback
Testing Infinite Scroll & Query
Example 2: React Query setup
Example 2 component
useInfiniteQuery
Update Example 2 with useInfiniteQuery
Testing Example 2 functionality