Infinite Scroll in React | Full Tutorial

Infinite Scroll in React is a highly requested app feature that can be achieved in several ways. This React full tutorial provides two examples of creating an infinite scroll: 1) with React hooks and 2) with React Query.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

Infinite Scroll & Infinite Query in React | Full Tutorial

(00:00) Intro
(00:35) Welcome
(00:46) Starter code and dependencies
(02:00) Axios API setup
(04:28) usePosts custom hook
(12:10) Example 1 component
(15:37) Post component and forwardRef
(18:01) Applying useRef
(19:05) Checking functionality
(19:59) Intersection Observer and useCallback
(24:21) Testing Infinite Scroll & Query
(25:54) Example 2: React Query setup
(27:40) Example 2 component
(29:25) useInfiniteQuery
(33:09) Update Example 2 with useInfiniteQuery
(36:08) Testing Example 2 functionality

📚 Tutorial References:
🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 General React References:

✅ Follow Me:

Was this React Infinite Scroll tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #infinite #scroll

[yourlinuxguy]

That thing in the end " A little progress everyday will get you very long way" So true.

[hikemalliday]

This is good bro. Put this on one of my frontends, and not saying it got me the intern, but it did make my project look nicer. I start in 2 weeks. Stoked

[ryostyles]

Awesome! It worked! Make sure "hasMore" condition is right before you proceed with intersection observer part

[genehenson]

I know it's an older video, but I was having heck of time finding tutorials that showed referencing children to observe. After some tinkering, this video saved the day. Thanks a lot!

[feyisayoamujoyegbe]

Your videos are always very sightful, weldone
Although I got lost while at the point of creating the useCallback function (probably because this is my first time using it) but I was able to understand majority of what you were doing and also implement it to fit my own project. Great Job

[hurleywflow]

Love all the modern content you are giving away🙏🏼. Appreciated 🇦🇺

[GabrielMartinez-ezue]

Excellent tutorial. I will definitely try this approach. I was trying to use it with SWR and the intersection obsever but had no luck achieving what i wanted.

[teminoah]

Thanks Dave, I was a bit lost when I saw the variable "lastPostRef", thought the arrow function assigned to it return a ref, obviously not .

But I later found out that the arrow function is actually a memorised function(callback) that is passed and invoked by the DOM element "<article ref={callback}/>", so the DOM element (<article/>) passing its ref as argument to the callback, so the callback adds the ref to the observer.

[xandrsurf]

Thank you Dave! Very usefull as usual)

[fernandoluna]

Awesome tutorial, I do have a few question though:

1. Why did you create an axios instance instead of using axios directly into usePost.js?
2. Why did you use useCallback for the intersection obsever instead of useEffect and two useRefs (for observer and lastPost)? Does useCallback improve performance in this case? And how?
3. Why do we need to abort the http request (using the AbortController) when unmounting the usePost hook?

[danieljing]

OMG, I just need to implement an infinite scroll in my project and don't know how to do it. then you post this, hahaha, awesome! Thanks Dave!

[mtpk]

Your tutorials are gold Dave, thank you! Would you consider tackling React front end search and filtering using Axios/API? A complement to the pagination/infinite scroll series possibly?

[sonamohialdin]

So good tutorial thank you, react query to build infinite scroll looks more easier than using react only

[era_webdev]

Greetings my tutor, I'm done with your HTML course. Currently on the CSS Tutorials vid. On the color section. Really grabbing it easily. I'm so grateful. How wish I could contact u personally. Would have been so happy. Keep the good work on SIR

[mrbilchalan]

Thanks is not enough but this is only I have right now. Its need some time to fully absorb for novice like me. Thank you.

[bergue]

Wow, i just use the ScroolView in react native.
Very good tutorial!

[willyhorizont]

Thanks Dave, now I know the React.forwardRef can be conditionally forwarding ref. I thought I need to create two seperate component, one with forwardRef one without ref.

[webcoder]

The 2nd approach is great if you have 1 page to show posts. But what if you have few different pages e.g. feed, bookmark, user posts etc, where the queryFn will be different. So in that case what will be the best approach? Shall we write useInfiniteQuery and useCallback code in each file or use custom hook for the observer part?

[zhongtom]

I feel that the custom hook method are much easier to understand. I tried to do the same thing with RTK Query as we use redux in our project. the problem is for page 2, it returns the data for page 2 only, there is no place to put extra logic to do [...prev, ...data].

[georgy]

Hi Dave, I have a few questions. To access intersection observer in react, we must use useRef? Also, we didn’t use useRef hook on lastPostRef (we used useCallback) but we can still pass it to our component as a ref. I am a little bit confused about this part). I have a small follow-up question) I just noticed, that every single time I safe changes in vs code, I got new response in network tab. But since I am working with external api, which limits the amount of fetching you can have, it can quickly kill your limit. Did you experience something similar before and if yes, what did you do to fix this