React and Intersection Observer

[@absyas5945]

Hello Leigh, I just had the urge to pause the video so that I may thank you for this amazing lesson, and your calm style of teaching a complicated topic. THANK YOU!

[@leighhalliday]

Hey Abs! Thank you so much :) Glad you enjoyed it!

[@absyas5945]

@@leighhalliday I really did, it helped me lazy load an animation, but I've noticed you have to use the triggerOnce option or else you get an undesirable effect (alternates between visible and hidden very quickly at the intersection). Ideally I really would've like it if the animation toggled between the two states smoothly. If you have any tips please let me know, in the mean time THANK YOU once again!

[@caleb.39]

I absolutely love the React community. In my experience most people who do tutorials are so knowledgeable, it's different from other programming languages where the person making the tutorial can seldom explain what they're doing

[@missmunmi]

loved the way you explained. Thank you.. Keep up the good work. Glad I found this video :) Happy coding...

[@leighhalliday]

Thank you Munmi, glad it helped!

[@gamehatred]

Amazing tutorial, just what I needed to implement Intersection Observer in my project! Subscribed!

[@leighhalliday]

Awesome! Thanks for subscribing gamehatred!

[@gamehatred]

@@leighhalliday Now I'm watching the google maps and google places video because I need to implement them as well, how are you doing this? :D

[@masihqashqai9374]

What if there are many sections or divs that need to be tracked for intersection? Your method only works for tracking one element intersection right?

[@mahakal76]

loving your videos man I've learned alot from you, I hope you keep putting out the great react content.

[@leighhalliday]

Thank you mahakal!! That's awesome! More vids on the way 👀

[@chany0033]

Interesting demo! , nice to see you again.

[@leighhalliday]

Thanks, Chany! Life is busy right now so it's hard to put out a lot of content but I'm doing my best :)

[@okaforirene2610]

Your content is always so helpful. Keep up the amazing work

[@leighhalliday]

Thank you very much Okafor!

[@janisdregeris248]

Thank You so much, perfect explanation! 👍

[@leighhalliday]

Glad you enjoyed it!

[@yashpandey9550]

Great content. Absolutely loved it. :)

[@leighhalliday]

Thanks Yash! Glad you enjoyed it!

[@nitin-goyal]

Awesome explanation man!

[@leighhalliday]

Thank you nitin!

[@huracan311]

thanks! great explanation

[@leighhalliday]

Thank you Andres!

[@gamspi9591]

Thank You

[@henokzelalem1964]

thanks man helped a lot!

[@leighhalliday]

Nice! Glad I could help :)

[@sebastiantramper3260]

Thank you for this great explanation of the intersection observer! further more i am looking into using multiple sections. Any ideas how to do that?

[@danihazler]

Thanks for that!!! Just wondering if this could be done as a HOC, so when applying to multiple sections wouldn't need to set a ref to each one of them.

[@leighhalliday]

Hmmm... I'm not sure! I'd be tempted to try to do it as a custom hook rather than an HOC. I think you would want a ref for each one though no? The intersection obsevrver needs an actual ref to a dom element for it to work.

[@danihazler]

@@leighhalliday actually, with the help of your second video (kzbin.info/www/bejne/fYenmqppoaasppI) I've manage to do it! Thannnks! :)

[@satindersingh9671]

One more gem

[@satindersingh9671]

Whatever topics I struggled with, strangely enough you have video on those. We are like minded

[@leighhalliday]

Haha glad they are helpful!

[@theodoreandrew5755]

Like your explanation. It's super clear :) Just one thing that I am still confused is that why do we use setRef instead of just using regular useRef? Thanks :)

[@leighhalliday]

Honestly I can't remember :D Give it a try with useRef, and if it works, go for it!

[@chazkondo]

subbed

[@leighhalliday]

Welcome, Chaz!

[@haruwiki]

Do you know if this observer API also works horizontally?

[@mantisory]

How would you adjust this to have multiple sections in the page animate separately? I was thinking to set the ref on each element directly, but I think there must be a better way...

[@leighhalliday]

Hey Byron! Yes, I think you'd need to set up multiple observers, each on their own element (with ref), each animating a specific portion of the page. There is no reason you couldn't adjust this to support many elements.

[@mantisory]

@@leighhalliday Thanks. Yeah, I ended up setting references for each section individually using the hook...works well, but just a bit cumbersome. I have a couple ideas though..

[@karenabgaryan7846]

in real world there is always multiple intersections, so its better to a little change project, because for example i spend lot of time to make this work with arrays, or multiple refs, result its not working, so this is not for deploying, just some hobby project

[@leighhalliday]

Hey Karen! Thanks for the feedback. I'd say the purpose of this video is to teach concepts... and then you can take them to implement for your exact use-case. If I were building an app, I'd be tempted to use this package which has thought of a lot more edge cases than the one I demo in this video. www.npmjs.com/package/react-intersection-observer

[@ironpurush0978]

You should provide line=k to your code as well.

[@leighhalliday]

Sorry! I do for approximately 96.125% of my videos, but I guess I forgot this one...

[@ironpurush0978]

@@leighhalliday It's alright man, it's just that we can read the code for correction.

[@window.location]

Thank you woked like a charm; super; (It will be nice if you share code via GitHub or Gist)

[@leighhalliday]

Hey Ajith! Sorry, normally I have code but I don't know where it is for this one...

[@cod-newbie9166]

You use a lot of hooks in your code, this is very intimidating. Is there any special case where a hook must be used? Please i want to know.

[@leighhalliday]

Hey Emeh! No, hooks are optional, as are class based components, but it seems like React is moving more and more towards being functional (as the recommended approach to components), and if you want state and/or effects (componentDidMount), you'll need to become comfortable with Hooks. The great thing is that in a lot of ways I think it makes it easier once you can get over the initial hump of becoming comfortable with them.