React & Infinite Scroll - IntersectionObserver

[@manphamquang552]

OMG thank you so much, all the other tutorial that I've read and the doc it self is really difficult to understand. Thank you for explaining this so well, I'm gonna share this to my friends.

[@leighhalliday]

Thanks, Man!! Share with your friends and family, pets and co-workers! I appreciate it!

[@errinwright]

@@leighhalliday Aunts and uncles and cousins and tribe members!!

[@Daniel-wx9wz]

Thank you, Leigh. I hope you hit a million subscribers one day because you deserve it

[@leighhalliday]

Thank you Daniel!! Hahah... I hope so too!! :)

[@ezwalduzumaki3161]

I was nervous in the beginning when you showed the load more button, thinking that this is not with intersection observer xD. Great video dude, wish you the best! I subscribed, looking forward to more content from you! Many Thanks :D

[@leighhalliday]

Don't be nervous Ezwald, everything's gonna be ok :D

[@ezwalduzumaki3161]

@@leighhalliday You seem to have a deep passion for programming, I love it too.

[@dmytromoroz4451]

Leigh, thank you for sharing your knowledge! This video helped me to implement Infinite Scroll in my step project :)

[@leighhalliday]

Nice!! That's awesome! Glad I could help a bit :)

[@ScottSpencePlease]

initialisation 👍 Thanks for this Leigh, I was doing it without useRef I'm going to try this way too

[@leighhalliday]

Oooo nice! Let me know if that helps, Scott!! Thanks for watching and leaving a comment :)

[@MrJatan90]

Man, thank you so for such amazing tutorial. Nice reproducible example and clear explanation

[@leighhalliday]

Glad you enjoyed it Jatan!

[@pierrickleroy7056]

you had a hard time with instantiation but at least the light did not shut down this time. Very interesting to see advanced use cases with useRef and how you solved the closure issue!

[@leighhalliday]

:) thank you Pierrick! Glad you enjoyed it!

[@psuprav]

Thank you Leigh. I love your videos. Everything is explained so well!

[@leighhalliday]

Thanks for the kind words, Pravesh! I'm glad you enjoy them :)

[@dominikseljan3043]

This is so cool. Thanks Leigh for another great video 🙂

[@leighhalliday]

Thank you Dominik!! I appreciate it!

[@rellify3]

Great explanation!

[@leighhalliday]

Thanks Spencer!

[@AdamsApples46]

suupeer aaaawesseome! thank you!

[@gagate81]

Amaizing! TY so much!

[@leighhalliday]

You're very welcome!

[@KMRakibulIslam]

Great video, as usual, Leigh! :)

[@leighhalliday]

Thanks Rakib! I appreciate it :)

[@ashwiniravinair3563]

Hello Sir...this video was very informative and helped me solve an issue I was facing.. thank you

[@leighhalliday]

Hey Ashwini! Thanks for saying hi :) Happy I could help!

[@tamaraevpraksina6945]

Hello!!! Thank you so much for great video and explication :).

[@leighhalliday]

Happy you enjoyed it!

[@youissac5401]

BEST!!! Thank you!!!!!!!!!!!!!!

[@AshishRawat-zl6te]

Amazing and really informative video.

[@leighhalliday]

Thank you Ashish!!

[@zAkRZa59]

Thanks, you just saved my job!

[@leighhalliday]

Phew! Glad you still have your job!

[@viktorsuvorov8888]

Thank you!

[@Krishtal3]

Great tutorial, thanks men

[@leighhalliday]

You're very welcome! Glad you enjoyed the video :)

[@lukechopper22]

Thank You So Much!

[@leighhalliday]

You're very welcome!

[@tianyidrinkmorewater]

Great stuff. However my gut is telling me that the useRef + useEffect combo can be rewritten with either useCallback or useMemo?

[@anuraghazra4772]

Nice. Thanks for this. 😊

[@leighhalliday]

No problem, Anurag! :D

[@SofiaGoyal]

Could you also tell how to update the count of the elements loaded ... ? i mean i can do it while scrolling down, but how to do it when scrolling up?

[@surajprasanna2493]

thanks a lot for the video

[@leighhalliday]

No prob, Suraj!! Glad you found it helpful.

[@ahrbil]

Hello Leigh, thank you for your amazing videos I have a question can we wrap the load function in a useCallback hook instead of useRef?

[@leighhalliday]

Hey abd! Give it a try! I just ran into problems, not so much with it being updated too often, but how to get the IntersectionObserver callback function calling the correct version of the load function.

[@jexxiewoo8390]

nice video, thanks! 👍🏼 So one silly question, this technique will cause multiple api calls when scrolled to bottom, while virtual list, like react-virtualized, will fetch the data only once then choose to render them at different time, am I correct? What are the different use cases?

[@leighhalliday]

Hey Jexxie! Those solutions may be better for longer lists where it requires virtualization (not sure what the exact number is), but I don't believe this approach in the video caused multiple API calls every time you hit the bottom, just a single one at a time, no?

[@bryanmichaelzapatacapcha6701]

Hello, I am applying the observer in a project in react and typescript and when I assign the "ref" to the div I get an error. I think it is the setElement that is null. Would someone help me please = (

[@leighhalliday]

Hmmm... yea at the beginning the rer.current value may be null, until after the first render, so perhaps that is what is causing an issue?

[@saidazkri134]

Why not to change to increment page number and changed in state with that example it can be done rapidly

[@leighhalliday]

Hey Said! You can totally do that... up to you!

[@rajathongal7669]

Can you tell how to do this for reverse scroll? great video by the wayd

[@ladislavhric5190]

"btfullly styled green button..." LOL

[@mortezatourani7772]

I think `observer` could be a simply memoized with useMemo. Where I go wrong?

[@leighhalliday]

What issues are you running into? Sorry, I forget this video now haha :D Short memory ;)

[@rayetzki]

@@leighhalliday What this guy is saying, is that instead of wrapping observer into ref you could've wrapped it into useMemo, and set load function as a dependency. Same thing but cleaner.

[@venXca]

Looks like the API has changed meanwhile and threshold:1 is not working like before. If you face issues, try using 0, or ignore passing options.

[@leighhalliday]

Thanks venXca, I wasn't aware of a change and haven't seen any documentation... are you able to share?

[@arjobansingh1940]

Hey I have a question, you are detting state again in return statement, means while rendering. React docs says we should avoid setting dtate in render method. As it will make infinite re-renders and app will crash, as setting state re-renders the component and after re-render we are just setting state. So why this is not crashing, or maybe I am missing something?

[@leighhalliday]

Hey Arjoban! I don't think I'm setting state in the render of a component... maybe you could point to me in the code what you are thinking of? github.com/leighhalliday/demo-infinite-scroll/blob/master/src/WithIntersection.js

[@yadiracondezo7754]

Hi, I don't understand the part about when you do the assignment to ref: ref = {setElement}? :(

[@leighhalliday]

I was placing the ref of the element into state here. If the value you pass to the ref prop is a function, it'll call that function passing in the reference.

[@Meugur]

smart

[@straxico]

nice

[@leighhalliday]

Thanks, Mehran!

[@BearkFearGamer]

Muito bom mesmo!

[@leighhalliday]

Obrigado!

[@satindersingh9671]

if we can create a new Intersection observer on every load without considerable performance loss and disconnect it in cleanup function then we don't need to create two useRef and two useEffect. One useState and useEffect could work. github.com/agnosticoder/next-infinite-scrolling

[@leighhalliday]

Nice! Always happy when you can take my examples and improve them!