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-infinit...

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/reac...
tanstack query - infinite queries | https://tanstack.com/query/v4/docs/fr...
Intersection Observer | https://developer.mozilla.org/en-US/d...
react-intersection-observer | https://www.npmjs.com/package/react-i...
Pexels API | https://www.pexels.com/api/

------------------------------------------------------------------------------

Hit us up on Socials!

https://www.syntax.fm/links

Brought to you by Sentry - Use code "tastytreats" to get 2 months free - https://sentry.io/syntax

#react #typescript #webdevelopment