In this video CJ shows a really easy way to implement infinite scroll with React. View the code here: 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 | tanstack query - infinite queries | Intersection Observer | react-intersection-observer | Pexels API | ------------------------------------------------------------------------------ Hit us up on Socials! Brought to you by Sentry - Use code "tastytreats" to get 2 months free - #react #typescript #webdevelopment











