DEV Community 👩‍💻👨‍💻

Cover image for Check if an element is visible with React hooks
José Miguel Álvarez Vañó
José Miguel Álvarez Vañó

Posted on • Originally published at jmalvarez.dev

Check if an element is visible with React hooks

Checking if an element is visible on the user screen is very easy using the Intersection Observer API. This API is supported by all major browsers.

The Intersection Observer API allows us to detect intersections of an element with another element. In our case we are going to observe for interceptions between a React element and the browser viewport.

We are going to create a custom hook for this to reuse this code where we need it.

In our custom hook we are going to to use useState to store the intersection status of the element.

export function useIsVisible() {
  const [isIntersecting, setIntersecting] = useState(false);

  return isIntersecting;
}
Enter fullscreen mode Exit fullscreen mode

The hook needs a reference to the React element that we want to observe. We are going to use the ref prop to pass the element to the hook.

export function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  return isIntersecting;
}
Enter fullscreen mode Exit fullscreen mode

Finally, we need to create an instance of IntersectionObserver and observe the element. The IntersectionObserver constructor accepts a callback function as first argument that is called when the element is intersecting with the viewport.

We are going to use the useEffect hook to do this to avoid creating new observers on rerenders.

export function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );

    observer.observe(ref.current);
  }, [ref]);

  return isIntersecting;
}
Enter fullscreen mode Exit fullscreen mode

To improve performance, we are going to call IntersectionObserver.disconnect() to stop watching for changes when the component is unmounted or a new element is passed to the hook.

export function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );

    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return isIntersecting;
}
Enter fullscreen mode Exit fullscreen mode

Our hook is ready to be used. To use it we only need to call it from a React component and pass a reference to the element that we want to check if it's visible or not.

export function MyComponent() {
  const ref = useRef();
  const isVisible = useIsVisible(ref);

  return (
    <div ref={ref}>
      <p>{isVisible ? "Visible" : "Not visible"}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

You can see a real usage example of this hook in my website. I'm using the hook to detect if the user scrolls to the bottom of the page and then load the comments of a blog post. You can see the source code of the component here. Enter any of the blog posts and scroll to the bottom of the page to see it in action.

References

Top comments (6)

Collapse
devdufutur profile image
Rudy Nappée

Great, thanks !! What's about performance ?

Collapse
jmalvarez profile image
José Miguel Álvarez Vañó Author

The performance is good. The callback passed to the IntersectionObserver instance is only called when the intersection state changes (i. e. it's only called when the component goes visible and when it goes invisible).

Collapse
yongchanghe profile image
Yongchang He

Thank you for sharing!

Collapse
jmalvarez profile image
José Miguel Álvarez Vañó Author

Thank you for reading it Yongchang!

Collapse
hr21don profile image
Helitha Rupasinghe

Great content!

Collapse
jmalvarez profile image
José Miguel Álvarez Vañó Author

Thank you Helitha!

👀 Just want to lurk?

 
That's fine, you can still create an account and turn on features like 🌚 dark mode.