React & Infinite Scroll - IntersectionObserver

We'll use IntersectionObserver to build an infinite scrolling list which loads additional data when the user reaches the bottom of the list.

[manphamquang]

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.

[Daniel-wxwz]

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

[dmytromoroz]

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

[ezwalduzumaki]

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

[MrJatan]

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

[pierrickleroy]

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!

[ScottSpencePlease]

initialisation 👍


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

[psuprav]

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

[dominikseljan]

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

[ashwiniravinair]

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

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

[tianyidrinkmorewater]

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

[tamaraevpraksina]

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

[rajathongal]

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

[bryanmichaelzapatacapcha]

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 = (

[saidazkri]

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

[arjobansingh]

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?

[yadiracondezo]

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

[mortezatourani]

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

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