The Easiest Way to Infinite Scroll with React | Full Example

In this video CJ shows a really easy way to implement infinite scroll with React.

View the code here: https://github.com/w3cj/react-infinite-scroll-example

00:00 Intro
00:43 Project Setup
01:11 Page Styles
01:21 Pure CSS Loading Spinner
02:33 Layout Styles
03:22 react-stately and useAsyncList
03:56 Why not tanstack query?
04:17 Install / setup react-stately
04:52 Pexels API Overview
05:16 fetch first page of images
05:46 Generate Types for the API Response
06:57 Creating items with the list
07:21 Image item styles
09:09 Image Container Aspect Ratio
10:08 Displaying the Images
11:08 Intersection Observer
11:33 react-intersection-observer
12:15 Watching for visibility changes
13:01 Loading the next page of results
15:06 Fixing duplicate load request
16:38 Wrapping list in useRef
18:13 Intersection Observer rootMargin
19:25 Thanks!

react-stately useAsyncList | https://react-spectrum.adobe.com/react-stately/useAsyncList.html tanstack query - infinite queries | https://tanstack.com/query/v4/docs/framework/react/guides/infinite-queries Intersection Observer | https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver react-intersection-observer | https://www.npmjs.com/package/react-intersection-observer Pexels API | https://www.pexels.com/api/