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.
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
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!
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.
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?
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?
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 = (
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?
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
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.
@@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.
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
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.
Thanks, Man!! Share with your friends and family, pets and co-workers! I appreciate it!
@@leighhalliday Aunts and uncles and cousins and tribe members!!
Thank you, Leigh. I hope you hit a million subscribers one day because you deserve it
Thank you Daniel!! Hahah... I hope so too!! :)
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
Don't be nervous Ezwald, everything's gonna be ok :D
@@leighhalliday You seem to have a deep passion for programming, I love it too.
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!
:) thank you Pierrick! Glad you enjoyed it!
Leigh, thank you for sharing your knowledge! This video helped me to implement Infinite Scroll in my step project :)
Nice!! That's awesome! Glad I could help a bit :)
initialisation 👍
Thanks for this Leigh, I was doing it without useRef I'm going to try this way too
Oooo nice! Let me know if that helps, Scott!! Thanks for watching and leaving a comment :)
Man, thank you so for such amazing tutorial. Nice reproducible example and clear explanation
Glad you enjoyed it Jatan!
Thank you Leigh. I love your videos. Everything is explained so well!
Thanks for the kind words, Pravesh! I'm glad you enjoy them :)
This is so cool. Thanks Leigh for another great video 🙂
Thank you Dominik!! I appreciate it!
Great explanation!
Thanks Spencer!
suupeer aaaawesseome! thank you!
Amaizing! TY so much!
You're very welcome!
Amazing and really informative video.
Thank you Ashish!!
Hello Sir...this video was very informative and helped me solve an issue I was facing.. thank you
Hey Ashwini! Thanks for saying hi :) Happy I could help!
Hello!!! Thank you so much for great video and explication :).
Happy you enjoyed it!
Great video, as usual, Leigh! :)
Thanks Rakib! I appreciate it :)
Thanks, you just saved my job!
Phew! Glad you still have your job!
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?
Great stuff. However my gut is telling me that the useRef + useEffect combo can be rewritten with either useCallback or useMemo?
Thank You So Much!
You're very welcome!
Nice. Thanks for this. 😊
No problem, Anurag! :D
Great tutorial, thanks men
You're very welcome! Glad you enjoyed the video :)
BEST!!! Thank you!!!!!!!!!!!!!!
Thank you!
Can you tell how to do this for reverse scroll? great video by the wayd
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?
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.
thanks a lot for the video
No prob, Suraj!! Glad you found it helpful.
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?
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?
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 = (
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?
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?
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
Hi, I don't understand the part about when you do the assignment to ref: ref = {setElement}? :(
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.
Why not to change to increment page number and changed in state with that example it can be done rapidly
Hey Said! You can totally do that... up to you!
I think `observer` could be a simply memoized with useMemo. Where I go wrong?
What issues are you running into? Sorry, I forget this video now haha :D Short memory ;)
@@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.
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.
Thanks venXca, I wasn't aware of a change and haven't seen any documentation... are you able to share?
"btfullly styled green button..." LOL
Muito bom mesmo!
Obrigado!
nice
Thanks, Mehran!
smart
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
Nice! Always happy when you can take my examples and improve them!