Infinite Scrolling With React - Tutorial

Infinite scrolling is incredibly common especially in social media applications, but it is intimidating to setup. In this video I will be breaking down exactly how to setup infinite scrolling and why it is much easier than it appears. Infinite scrolling is really just a fancy type of pagination that will paginate without the user needing to click a button. This means that we can setup simple pagination, but instead of hooking it up to a button we need to hook it up to scrolling. Setting up a JavaScript event on scroll is not very performant, though, so we will be using the amazing InteresectionObserver API to efficiently check for when the last element of our list is loaded.

🚨 IMPORTANT:

If you want to learn React in depth checkout my full modern React course.

📚 Materials/References:

🧠 Concepts Covered:

- How to use React hooks
- useEffect, useState, useRef, useCallback hooks
- IntersectionObserver with React

🌎 Find Me Here:

#React #WDS #InfiniteScrolling

[fluntimes]

Great to see a video that includes some of the more advanced React features. I'll definitely need to watch this again, which is a feature of the best code run through videos.

[jefffideler]

Gotta say...this is probably the best, most straightforward tutorial I've ever seen!

[Doom_C]

Awesome tutorial man. Straight to the point and well explained. Got an infinite scroll up and working in my application no problem after watching this. Subscribed!

[toaninh]

when i click this video, i only expect to know how to implement infinity scroll. But after 25 minutes i have learned way more than that, like custom hook. Thank you so much <3

[LinkSake]

Amazing! Thank you very much, I thought it would be harder to make something like this.
Also THANKS because I finally got how to make a custom hook, I was having some struggles to get it.

[rajapavithraselvaraj]

I really have to say.. this was the best, clear, very staright forward tutorial. AWESOME

[akarshsrivastava]

Kyle, you are great. Never found a tutor explaining such complex topics so easily. 😊

[sahaneakanayaka]

That useCallback() behavior with useRef() that confused me, now I got it. Thank you Kyle, this is the best explanation about infinite scrolling with react 😍😍

[isaacpriestley]

Your tutorials are incredible! It's so much great information in such a concise presentation.

[xanderav]

Hey!, just a simple tip that i use, is when you want to know if an array have elements (means its length is greather than 0), you only have to put array.length instead of array.length > 0, because if array.length is 0, 0 means false, and if is not 0 so is true, sorry if my english is bad.

[jairocket]

This tutorial is amazing! Thank you very much for making it simpler!

[aryavats]

Man I have watched literally thousands of paid courses, but no course matches the level of explanation that this guy provides. Simply Amazing. Hats off!

[Rodo]

This is a great tutorial, straight to the point and clear. Thank you, Kyle!

[uszeyboi]

Thank you so much! I was struggling with window object so long and finally your video helped me!

[johnbox]

awesome video. infinite scrolling starts at 17:50

[acedecastro]

Learned a lot from this. Thank you so much Kyle 🙏🏼

[usamatahir]

Thanks for the tutorial. This is probably the best, most straightforward tutorial

[koladeleolaitan]

Just used this at work. Thank you Kyle!

[MaxAigner]

I am really impressed by this tutorial, it helped me a lot in my current react project, thank you!

[rizqyhbb]

just from this video I have learned so many things, mainly the useRef and useCallback. thankyou