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.

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!

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

Hit us up on Socials!

#react #typescript #webdevelopment

[pankajsharma]

I learn lot of things today
React effect order matters
Intersection observer API
Adobe Infinite scroll package

Thank you CJ for sharing 🤝

[syntaxfm]

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!

[MishaMoroshko]

Great video CJ, thanks!
Minor suggestion: in the `useEffect` where you set `listRef.current = list`, I'd remove the dependency array since it's probably faster to set `listRef.current = list` on every render vs checking whether the dependency array has changed.

[JheeeBz]

A Next.js example would be great, because I just recently had to implement this for work and it was a challenge indeed.

[thedelanyo]

Wow, great. Learned a lot. Please also with Svelte

[irfansaeedkhan]

are we removing old posts also like having only 10 of total posts ? so we don't have performance issues ? like we have on twitter at a time 20 posts is shown when we go back old gets loaded and new ones removed and when we scroll down new one shows old gets removed, I have not watched video yet I will watch if that's covered :P

[infitates]

i tried adding infinite scroll to nextjs without using react query but the moment u want something like hitting like button it falls apart, because revalidatePath triggers state update. Can't wait to see ur implementation, maybe im doing something not right.

[thebrpob]

Awesome tutorial dude! Though I wonder if there's a way to do this without the doubled useEffect, or at least have it abstracted away. Still, thank you for the tutorial!

[ИванРагозин-яя]

Infinite Scroll !== Virtual Scroll (X, TikTok)