DEV Community

Cover image for Intersection Observer using React

Intersection Observer using React

Zygimantas Sniurevicius on February 15, 2021

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...
Collapse
 
epresas profile image
epresas

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

Collapse
 
zygiss22 profile image
Zygimantas Sniurevicius • Edited

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!

Collapse
 
conti profile image
Conti • Edited

I had no idea on how to use this properly, thanks for the article.

Collapse
 
iperzic profile image
Igor Perzic

I think there are couple of things worth pointing out:

  1. Ref should be removed from the dependency array because refs never change reference (hence their name), thus never triggering useEffect (or any other hook that has a dependency array, for that matter).
  2. Options dependency reference is changed on every render, because it's being re-declared as new object.

That being said, we might as well omit the dependency array altogether, it will have the same effect.

Collapse
 
codinghusi profile image
Gerrit Weiermann

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

Collapse
 
isumix profile image
Igor Sukharev • Edited

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

Collapse
 
jbilee profile image
jbilee

This helped me tremendously! Tysm!

Collapse
 
m3rtzi profile image
Jakob Lilliemarck

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.

Collapse
 
wijayaac profile image
Wijayaac

Thank You for great tutorial, very helpful for my gatsby project

Collapse
 
demenezes profile image
deMenezes

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

Collapse
 
skosariprotonm1 profile image
Siamak Kosari

Thank you for that. I'm using your hook in a nextjs portfolio project and it works perfectly.

Collapse
 
jorchg profile image
Jorge

Nice!

Collapse
 
s_urya_dev profile image
surya_dev

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?

Collapse
 
serhatbek profile image
serhatbek

Thank you so much! I spent whole my day and couldn't make it work until I find this article. 🙏❤️

Collapse
 
bjornarhagen profile image
Bjørnar Hagen 🐻

Great article! :) Though I wish the code was not images

Collapse
 
z10n profile image
T

What kind of person are you if you post code as images? Jsj fk...

Collapse
 
eduhsoto profile image
Eduardo Hernández Soto

if are multiple refs? or elements?

Collapse
 
max10 profile image
max10

Thanks a lot, you saved my nerves. Like

Collapse
 
ziaulhaq11 profile image
Ziaulhaq11

Thanks a lot

Collapse
 
juninhoall profile image
almeida.tsx

Amazing!!!!!!

I use it in a header, it's done well.

Collapse
 
amalvaishnav96 profile image
Amal Vaishnav

Thanks for this, helped me a great deal!

Collapse
 
bayurn profile image
Bayu Rizky Nurseto

I want to ask something, is it possible to call API only when certain section is visible? use that way? thankyou
Great article btw

Collapse
 
timzzz19 profile image
TimZZZ19

Is the containnerRef supposed to change everytime the component rerenders? So the useEffect hook will execute because the change of containerRef?

Collapse
 
isumix profile image
Igor Sukharev • Edited

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

Collapse
 
shinthant profile image
Shin Thant

what is your vs code theme?