Intersection Observer API in React

Intersection Observer API in React

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of an element with a viewport or a parent element. It’s a highly performant method for implementing tasks like lazy loading of images, infinite scrolling, or triggering animations when an element enters the viewport. Unlike traditional scroll event listeners, the Intersection Observer API provides a more efficient approach by offloading the observation process to the browser, reducing performance overhead.

In this guide, we will walk through how to use the Intersection Observer API in a React app.

1. Setting Up a Basic Intersection Observer in React

Let’s start with a simple example where we detect when an element enters or exits the viewport. The goal is to log a message to the console when the target element becomes visible.

Example: Simple Intersection Observer

1. Install React (if needed) If you haven’t already, create a React app: npx create-react-app intersection-observer-demo cd intersection-observer-demo
2. Create the Intersection Observer Component

import React, { useEffect, useRef, useState } from 'react';

const IntersectionObserverComponent = () => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const targetRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting);
        console.log(entry.isIntersecting ? 'Element is visible' : 'Element is not visible');
      },
      {
        root: null, // observing the viewport
        rootMargin: '0px', // margin around root
        threshold: 0.5, // 50% visibility to trigger
      }
    );

    const targetElement = targetRef.current;

    if (targetElement) {
      observer.observe(targetElement);
    }

    return () => {
      if (targetElement) {
        observer.unobserve(targetElement);
      }
    };
  }, []);

  return (
    <div style={{ height: '150vh' }}>
      <h2>Scroll Down to See the Intersection Observer in Action!</h2>
      <div
        ref={targetRef}
        style={{
          width: '100%',
          height: '200px',
          backgroundColor: isIntersecting ? 'green' : 'red',
          marginTop: '100px',
        }}
      >
        {isIntersecting ? 'Element is visible!' : 'Element is not visible!'}
      </div>
    </div>
  );
};

export default IntersectionObserverComponent;

Explanation:

• useRef: Used to create a reference (targetRef) for the element we want to observe.
• IntersectionObserver: A built-in browser API used to observe the visibility of the target element.
  • entry.isIntersecting: A boolean value that indicates if the element is currently visible in the viewport (or if it intersects with the specified root).
  • root: The element to use as the viewport. null means the browser viewport.
  • rootMargin: Margin around the root to expand or contract the root’s bounding box.
  • threshold: A value between 0 and 1 that defines the percentage of the element’s visibility required to trigger the intersection. In this case, 0.5 means the element needs to be 50% visible for the observer to trigger.
• useEffect: We set up and clean up the observer inside a useEffect hook. The observer starts when the component mounts and cleans up when the component unmounts.

What Happens:

• As you scroll down, when the target element is at least 50% visible in the viewport, it will change color to green and show the message “Element is visible!”.
• When it’s not visible, the element’s color will turn red, and the message will read “Element is not visible!”.

2. Implementing Lazy Loading with Intersection Observer

A common use case for the Intersection Observer is lazy loading images. You can defer the loading of images until they come into the viewport.

Example: Lazy Loading Images

import React, { useEffect, useRef, useState } from 'react';

const LazyLoadImages = () => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const imageRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsIntersecting(true);
          observer.unobserve(entry.target);
        }
      },
      {
        root: null, // observe in viewport
        rootMargin: '0px',
        threshold: 0.1, // 10% of the image should be visible
      }
    );

    const imageElement = imageRef.current;

    if (imageElement) {
      observer.observe(imageElement);
    }

    return () => {
      if (imageElement) {
        observer.unobserve(imageElement);
      }
    };
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <h2>Lazy Loading Images Example</h2>
      <div
        ref={imageRef}
        style={{
          width: '100%',
          height: '400px',
          backgroundColor: '#ccc',
        }}
      >
        {isIntersecting ? (
          <img
            src="https://via.placeholder.com/800x400"
            alt="Lazy loaded"
            style={{ width: '100%', height: '100%' }}
          />
        ) : (
          <p>Scroll down to load image</p>
        )}
      </div>
    </div>
  );
};

export default LazyLoadImages;

Explanation:

• isIntersecting: A state variable that tracks whether the image is in view.
• Lazy Loading Logic: The IntersectionObserver triggers when the image is 10% visible in the viewport and loads the image by updating the state.
• Image src: Initially, the image will not be loaded, and a placeholder text will be displayed. When the image is in view, it is loaded dynamically.

What Happens:

• When the element comes into view, the image loads. Until then, a placeholder or “scroll down to load image” message will be shown.

3. Using Intersection Observer for Infinite Scrolling

Another common use case for the Intersection Observer API is implementing infinite scrolling. This can be used to load more content as the user scrolls down to the bottom of the page.

Example: Infinite Scrolling

import React, { useState, useEffect, useRef } from 'react';

const InfiniteScroll = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }, (_, index) => `Item ${index + 1}`));
  const loaderRef = useRef(null);

  const loadMoreItems = () => {
    setTimeout(() => {
      setItems((prevItems) => [
        ...prevItems,
        ...Array.from({ length: 20 }, (_, index) => `Item ${prevItems.length + index + 1}`),
      ]);
    }, 1000);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          loadMoreItems();
        }
      },
      {
        root: null, // viewport
        rootMargin: '0px',
        threshold: 1.0, // trigger when 100% of the loader is visible
      }
    );

    const loaderElement = loaderRef.current;
    if (loaderElement) {
      observer.observe(loaderElement);
    }

    return () => {
      if (loaderElement) {
        observer.unobserve(loaderElement);
      }
    };
  }, []);

  return (
    <div>
      <h2>Infinite Scroll Example</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <div ref={loaderRef} style={{ height: '50px', backgroundColor: '#ccc', textAlign: 'center', padding: '20px' }}>
        Loading more items...
      </div>
    </div>
  );
};

export default InfiniteScroll;

Explanation:

• loadMoreItems: This function simulates an API call to load more items and appends them to the state.
• IntersectionObserver: It watches the “loading” element (in this case, a div with the loaderRef), and when this element is fully visible in the viewport, it triggers the loadMoreItems function to load more items.
• Threshold: Set to 1.0, meaning it will trigger when 100% of the loader element is visible.

What Happens:

• As you scroll to the bottom, the “Loading more items…” element becomes visible, triggering the loading of more items.