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.
courses.webdevsimplified.com/...
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/R...
🧠 Concepts Covered:
- How to use React hooks
- useEffect, useState, useRef, useCallback hooks
- IntersectionObserver with React
🌎 Find Me Here:
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#React #WDS #InfiniteScrolling

[@jefffideler8046]

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

[@Mike37373]

why is openlibrary.org/search.json empty?

[@jefffideler8046]

@@Mike37373 perhaps it needs params i.e. axios({ method: 'GET', url: url, params: { q: query, page: pageNumber }, cancelToken: new axios.CancelToken(c => cancel = c) }).then

[@serhendiefendi]

i agree

[@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.

[@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!

[@toaninh2668]

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

[@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.

[@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.

[@irasanchez1265]

No need to apologize for your English. it was understandable.

[@nishantmogha7679]

Or you can just use the array, [] is falsy.

[@limitless9483]

@@nishantmogha7679 array [] and {} are truthy brah

[@limitless9483]

Also to make sure the app won't crash when array is null use optional chaining like myArr?.length

[@xxxyy7452]

You can do that, but sometimes clearly code better than clever code

[@akarshsrivastava8890]

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

[@rajapavithraselvaraj5937]

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

[@acedecastro83]

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

[@WebDevSimplified]

You're welcome!

[@isaacpriestley]

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

[@jairocket]

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

[@sahaneakanayaka3394]

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 😍😍

[@uszeyboi]

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

[@frontendHacks]

kzbin.info/www/bejne/mWHRfJ2Do6mZfZY&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi

[@johnbox5540]

awesome video. infinite scrolling starts at 17:50

[@Rodo1802]

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

[@usamatahir6413]

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

[@nalladileepreddy1436]

Never saw any better explaination than this, thank you ..

[@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

[@amitpareek8905]

Amazing video. You have made a complex thing look so easy. Keep up the great work!! Thank you!

[@frontendHacks]

kzbin.info/www/bejne/mWHRfJ2Do6mZfZY&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi

[@anshshrivastava9107]

Thanks for this man, exactly what I was looking for, now I can create what I wanted. THANKSSSSSSSSSSSSSS

[@sergiodfm]

I. You are awesome. This video is amazing. You just went straight to the point and your language was very clear. Thanks for sharing this content.

[@user-rm6rb3tp5u]

This react lecture is AMAZING... Thanks from Korea.

[@mellocamilo]

Awesome tutorial!! thanks for this high quality work!

[@djmilen4o]

Nice and clean tutorial! Very good explained!

[@ismoilshokirov]

Really good approach, dude your video helped me a lot to finish my project at work, Thank you so much

[@aryavats5403]

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!

[@chexter-wang]

This is so easy to use and does help a lot! Thank you for the video!

[@NikhilAdiga]

Thank you so much! None of the other solutions worked for me except this!

[@DieterWiesflecker]

Very very straightforward, keep the good work and thanks!

[@ankitmehrotra8519]

Thanks a lot Kyle. All of your videos are top notch..

[@mayurborse1745]

Awesome. Just what I was looking for. I used it in photo grid and full screen view in my app. Thanks

[@brunamarques580]

Thank you so much for this tutorial, it literally helped me pass in a interview test 👏

[@waynes9744]

I learned a lot from this video. Thank you, Kyle.

[@WebDevSimplified]

You are very welcome

[@razzsawhoney2818]

Thanks man. A much needed tutorial for me...

[@eternl_sunshine22]

thanks!! used your pagination api with this, tweaked it a little as i'm using sequelize and it works great.

[@marcusmaiialima]

Thank man!! It was very simple to implement and add to the project.

[@viratkohli-jr6md]

Cool . Got my all doubt cleared. Nice work

[@Andy801_dawless_music]

so much useful info in 25 mins 😄 thanks!

[@lexternal]

thanks, great tutorial. prob one of the best i ever watch

[@chronotriggered204]

Wow, infinite scrolling was simplified many thanks, your explanations help me grok

[@koladeleolaitan]

Just used this at work. Thank you Kyle!

[@kingsleyakindele5389]

A very great tutorial man.

[@hamedbahram]

Hey Kyle, thanks for the amazing tutorial, appreciate your work. I know this is an older video but had a quick question if you ever had the chance to read this, I can't figure out why the function inside the useCallback() where you defined the intersection observer get's called 4 times each time an intersection is observed. Best.

[@limitless9483]

Its being called twice, the first time you feed the target (node ) to the observer and the second when the target intersects with its intersection root (the scrollable div container)

[@rva3674]

The best tutorial in youtube!!!

[@faris.abuali]

Great explanation! Thanks Kyle!

[@mohammadaldibes6879]

The best tutorial I've ever seen

[@whereismyjuliet]

Amazing tutorial, as special the approach to trigger the axios function via IntersectionObserver instead of div.scrollHeight.

[@parasarora5869]

its totally amazing. i dont know about intersection observer so was a bit confused there but the video was mind blowing. Thanks for explaining the idea behind the infinite scroll

[@WebDevSimplified]

Intersection Observer is a bit complex, but it makes doing things like infinite scrolling so much easier.

[@parasarora5869]

@@WebDevSimplified yes.. absolutely correct

[@mcy93w]

24k pure gold. Thank you so much!

[@itsatimemachine]

your videos are awesome-- thank you! also, happy new year

[@RizaHariati]

The intersectionObserver is awesome!! so much more practical!

[@KarahannAe]

Thank you for this amazing video! My project was a little different but I managed to make it work in a short amount of time.

[@frontendHacks]

kzbin.info/www/bejne/mWHRfJ2Do6mZfZY&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi

[@fab313]

Great lesson. Thank you!

[@user-ci5cq5il1s]

Thank you for making such an understandable and useful lessons! You're really great🙏💛

[@jhmesseroux]

incredible bro i appreciate this🙌 kind of content

[@soultouchingsongs]

Thanks a lot for the video🙏. Finally understood infinite scrolling.👍

[@charliesoandso]

This is outstanding. Thanks :D

[@gautamv2046]

Really appreciate your work, simplest of all

[@frontendHacks]

kzbin.info/www/bejne/mWHRfJ2Do6mZfZY&ab_channel=Front-EndHacks Watch Infinite Scroll Video here in Hindi

[@romihasan380]

you've a better solution than using scroll position broo, good job!!

[@user-fk6mr5dr9k]

just amazing! perfect! thanks

[@ankurkhera11]

Thanks a lot. Great explanation!!

[@md.akib5124]

wow you just taught us to make a node_module. Thank you so much

[@said-magomeddzhabrailov7911]

Thanks for the great content!

[@yorkwebsolution8986]

Very simple explanation. thanks alot

[@riankrishandi]

nice tutorial , clear explanation , thanks bro

[@supreechajaijumpa4656]

I'm tried to use infinite scrolling library but it not looking good. Your video had save my life it working great and smooth, Thanks

[@ashishkumawat6110]

Very clever implementation!

[@kemcadams7210]

This is a great example - thanks

[@xunianzu]

This is very helpful. Thank you.

[@AjithAbinashSS]

Great Tutorial... Helped a lot

[@BhushanDhage]

Awesome explanation 👌🤩

[@cod3a]

thanks bro, very useful :)

[@Nexjsdeveloper]

Thank you so much, useful❤

[@rideforworld]

congrats for your engagement!

[@Nil-js4bf]

Didn't realize so little code was required for this. I'm too used to using libraries and I'm not aware of what Web APIs there are. Going to put an effort to learning more of these things and getting comfortable with web APIs like Intersection observers and setting it all up with refs and callbacks

[@syedumair3172]

Learned a lot! Thanks

[@GBG731]

Great video, good job!

[@magicfibre]

I think this deserves a clarification - it's not just useCallback that can be assigned to an element's ref. Any function can be passed there, you just need to be very careful if the function updates state, since it can cause infinite re-renders. Therefore, in this scenario, Kyle is right to use the useCallback hook, as the function he's using calls setPageNumber. Let's say he used a plain function: the function he's using sets the state at some point, which re-renders the component. When the component gets re-rendered, the function gets reinstantiated. Since it's passed to an element's ref, the element gets re-rendered, which calls the function again. The function changes the state, causing the component to re-render... and we have ourselves an infinite loop.

[@Ann-eb8hh]

Wonderful explanation!!

[@JeanGray218]

this literally just happened in class a few minutes ago in this example our TA was showing us...thank you now I understand why

[@manavdixit3355]

Why can't we just create an reference using useRef and pass it to the component. Then Handel the intersection observer without a function.

[@kavyar8579]

Great explanation

[@aronhegedus]

Thank you for this tutorial! I got something similar workign, I just wanted the "isVisible" for one of my elements to show up. I think this video is a little too long, and getting the custom hook created is a little bit of a side job for getting infinite scrolling, and I would have preferred just getting the "isVisible" working, and then going from there. That being said, thanks for the info, your tutorials are always at a good pace, and I like that you've included the source code!

[@victorjordan889]

Amazing content! Thanks a lot!

[@priyasivakumar3607]

Nailed it. Thanks for the Topic

[@HOSS11H]

Very Useful Thank you saved my day

[@TiberiusGracchi]

Very good information, especially the part about using useCallback instead of ref. I was just wondering how to grab the last node.

[@akshayjadhav2418]

Really good content kyle, please make video on lazy loading and interceptor in react (:

[@joelspinelli3701]

great tutorial, thanks!

[@ramusesandasari8451]

Awesome Tut

[@avneet12284]

O boy !! That was excellent 👍👌

[@WebDevSimplified]

Thank you!

[@reedstewart8413]

Great video! I've been watching your React videos for some time now and was just wondering why you use es5 functions instead of es6 arrow functions? Again really good video!

[@WebDevSimplified]

It really depends on the use case. I find that if I am creating a named function such as function someName() {} then I use a normal function, but when I am nesting function calls in callbacks or making anonymous function calls like this someOtherFunction(() => {}) then I use an arrow function. It really depends, though, and for the most part I use arrow functions.

[@mattmarkus4868]

to be honest, I find the old school function() easier on the eyes. I only use => when doing anonymous functions and call backs like he said ^. But if it's just a function on the component, I like the look of the "es5" way.

[@manimarann1457]

Thanks for such an amazing vedio bro.

[@gaming24x75]

You Solved My Problem Thanks Sir

[@invictuz4803]

Awesome tutorial mate! I suggest including "Custom React Hooks" in your title. I was actually pleasantly surprised that this tutorial was going to include custom hooks. If I had saw that in the title, I would have clicked on it way earlier since React Hooks is the hot thing that everyone should be learning now. Furthermore, now that I've saved this to my React playlist, I still won't know that it includes custom hooks when I scan through all the video titles.

[@kat802]

thanks dude, u save my job. button like for u

[@hakanaki]

Love Your Videos bro 👏👏

[@foREVer1996123]

Amazing tutorial

[@brinascode980]

Hey Kyle, what advantage did useCallback have here over a regular function, since it's using a dependency array anyway? Thanks for the video!

[@posivibez2094]

extremely helpful thank you

[@diegor5805]

This is it! Nice!

[@user-yo6vd5ov8k]

thank you so much, man!

[@dileepnagendra8199]

Brilliant !!!