Discussion on: How to fade in content as it scrolls into view

[Sung M. Kim]

Thank you for the post, @selbekk~

For completeness, one can unobserve the ref in FadeInSection on unmount.

  React.useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        console.log(`entry`, entry, `is = ${entry.isIntersecting}`);
        setVisible(entry.isIntersecting);
      });
    });

    const { current } = domRef;
    observer.observe(current);

    //                      👇 
    return () => observer.unobserve(current);
  }, []);

I wasn't aware of this unobserve until running into the issue recently when I implemented my sticky components using IntersectionObserver, which had a memory leak.

Here is the fork with unobserve & "unmount" button.

[selbekk]

Ah that’s true - forgot about that one! I’ll update the example later today to include it (with credit given, of course)

Edit: Updated the post.

[Sung M. Kim]

Thank you 🤜