Today we are gonna explore how to use the intersection observer API in React and see some useful examples, you can find the code in the following r...
For further actions, you may consider blocking this person and/or reporting abuse
Great job! I have one question: would this work the same between components? For example: parent component that maps inside a list of , I asume that the IO will be implemented in the parent, but do I have to create a ref for each item? Sorryif ai didn't explained myself correctly... And thanks for this post
yes, you asumed correctly the parent component needs the IO and what we get there is the entire element's size of the component including the items inside or whatever we want to have there, we dont need to add to each item a ref.
Thanks for reading it!
I had no idea on how to use this properly, thanks for the article.
I think there are couple of things worth pointing out:
That being said, we might as well omit the dependency array altogether, it will have the same effect.
Update:
There's the npm package react-intersection-observer that does the job for you, additionally you got also a component you can wrap around your element to make your code more clean :)
npmjs.com/package/react-intersecti...
Your example is not entirely correct. The containerRef will not trigger the useEffect, and it should not be included in its dependencies. For more details, please refer to this article medium.com/@teh_builder/ref-object...
This helped me tremendously! Tysm!
Thanks for a great article/tutorial - it helped me alot in implementing lazy-loading of content based on visibility in a React project.
In doing so, however, it seems calling observer.unobserve(target) in the cleanup is not enough - react complains about calling setState on unmounted component. calling observer.disconnect() seem to unregister the IntersectionObserver completely and made React stop complaining.
Thank You for great tutorial, very helpful for my gatsby project
I had to create my account on this site just to comment and like this post, congratulations
I just implemented a behavior in my blog header using the Intersection Observer
If you want to see: demenezes.dev
Thank you for that. I'm using your hook in a nextjs portfolio project and it works perfectly.
Nice!
It's beneficial! I have been thinking about how to implement the IntersectionObserver API in React. It really helps a lot. How can we use Tailwind CSS for DOM manipulation?
Thank you so much! I spent whole my day and couldn't make it work until I find this article. 🙏❤️
Great article! :) Though I wish the code was not images
What kind of person are you if you post code as images? Jsj fk...
if are multiple refs? or elements?
Thanks a lot, you saved my nerves. Like
Thanks a lot
Amazing!!!!!!
I use it in a header, it's done well.
Thanks for this, helped me a great deal!
I want to ask something, is it possible to call API only when certain section is visible? use that way? thankyou
Great article btw
Is the containnerRef supposed to change everytime the component rerenders? So the useEffect hook will execute because the change of containerRef?
Nope, the containerRef will not trigger useEffect and should not be used in the dependencies, The above example is not entirely correct. For more details, please refer to this article medium.com/@teh_builder/ref-object...
what is your vs code theme?