Intersection Observer Hook in React

Ever felt the need to lazy-load images, implement infinite scrolling, and decide whether or not to perform an animation based on what the user will view?

Intersection Observer API provides us with a way to do all this. To understand intersection observer API completely I would recommend checking out it at mdn web docs.

What is the Intersection Observer API?

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Intersection Observer takes two arguments as follows:

1. Callback

Intersection Observer API provides a callback function as the first argument that is executed whenever an element (target) enters or exits another element (viewport).

The callback receives a list of entry objects as follows:

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

For our use case, we will be working with entry.isIntersecting which returns a boolean that will return a true value whenever the target is intersecting the viewport and a false when it’s not.

2. Options

The options object passed into the IntersectionObserver constructor as the second argument lets us control the circumstances under which the callback is invoked. It has the following fields:

1. root: The DOM element which will act as the viewport for intersection against our target element. The root element needs to be an ancestor of the target element. If we don’t specify the root or set it to null it will default to the browser's viewport.

2. rootMargin: The margin around the root element. This can be used to shrink or grow roots. Defaults to zero.

3. threshold: Threshold takes in a single number or an array of numbers indicating at what percentage of the target’s visibility the callback should be invoked.

Intersection Observer Hook

In many cases, you may need to use Intersection Observer for more than one target and at more than one place. So, it makes sense to create a hook to extract all that logic and give us a boolean that represents whether or not the given target is intersecting on the viewport.

Create the intersection observer using its constructor. As the first argument, configure the callback function to change the state of intersecting boolean depending on the visibility of the target.

We are then changing the circumstances under which the callback is invoked using the root, rootMargin & threshold fields of the options object.

This constructor will be wrapped inside a useEffect hook to make sure it is invoked after the first render and when any subsequent changes occur in its dependencies.

if (element) observer.observe(element)

We will use the observe( ) method that adds an element to the set of target elements being watched by the IntersectionObserver.

return () => currentObserver.disconnect()

As the cleanup function for our useEffect we will return the IntersectionObserver method disconnect( ) to stop watching all of its target elements for visibility changes.

How to use Intersection Observer Hook?

As you can see from above the use of this hook is quite straightforward, we will call the useIntersectionObserver hook which will take the options object (we discussed earlier) as an argument.

The hook will return a boolean and a setState function for setting the node we want to use as a trigger for the Intersection Observer.