Dev.to

Using Intersection Observer API in React

Introduction There are different reasons to perform some functionalities or animation effects when a user scrolls on a web page. Examples of this could be to toggle a class, to conditionally render different components based on scroll or a certain element position, or to animate elements in and out of the viewport. There are also several ways to get this done; we can use scroll event listeners, scroll animation libraries, or JavaScript's Intersection Observer API. In this article, we will explore the benefits and drawbacks of these approaches and also go on to discuss further the Intersection Observer API and how it can be used in React. Prerequisites Before we proceed, it is important to note that a basic knowledge of HTML, CSS, JS, and React is crucial to fully understanding the concepts discussed in this article. That being said, let's get into it! Scroll Event Listeners If you want to make an event happen on Scroll, it is probably a no-brainer to go with a Scroll event listener, as that will give you exactly what you want... initially. But as I'm sure there will be other edge cases to consider in a real-life project, you'll soon realize that this brings even more trouble because this said event would then happen every time the user scrolls on the webpage. Unless in specific use cases, this will ultimately become annoying to the user and eventually lead to some issues, such as; Performance: Scroll event listeners trigger an event every time the user scrolls the page, which can lead to a high number of events being fired. Handling these events in real-time can be computationally expensive and cause performance issues, especially on complex web pages or on devices with limited resources. Jank and Stuttering: When scroll event listeners are used to update elements on the page, such as animating or manipulating DOM elements, it can result in janky and stuttering scrolling experiences. This occurs because the scroll events are processed in the main thread, potentially blocking other critical operations. Lack of Control: Scroll events fire continuously while scrolling, even if you're only interested in specific points or sections on the page. This can make it challenging to optimize code or trigger actions at specific scroll positions. Scroll Animation Libraries Animation is one of the most common usages of scroll events. Having elements fade in and fade out, changing shapes and styles as the user scrolls through the webpage, has been a game changer in designing aesthetically pleasing websites. My personal top two animation libraries for React are Framer Motion and GSAP. These libraries are hands down the best out there right now, in my opinion, and are more than capable of bringing wild creative imaginations to life. But most times, it is just best to really keep simple things simple. Sure using animation libraries may be fancy and whatnot, but if what you're trying to do is straightforward and simple enough, I see no reason to bloat up your code base with another library when you can achieve the same thing with a built-in Javascript API. Intersection Observer API While working on an open-source project I'm contributing to over the past week, there was a need to implement the design of a component that changes state based on its position in the viewport. I knew that I didn't want the state change to happen just on scroll, and I also did not want to install any third-party package unless it was absolutely necessary. After much research and trial, Intersection Observer API gave me the perfect solution I was looking for, which was the main motivation behind this article. The IntersectionObserver() is a JavaScript API designed specifically for efficiently observing changes in the intersection of an element with its parent container or the viewport. Apart from the already mentioned need to keep things simple, it also offers the following improvements over scroll event listeners: Performance Optimization: Intersection Observer is designed to optimize performance by providing a callback that executes when elements enter or exit the viewport or another defined area. This approach reduces the number of events fired and allows the browser to handle the observations more efficiently. Asynchronous Execution: The scrolling and layout operations are separated from the JavaScript execution via the Intersection Observer API's asynchronous operation. This division eliminates jank and stuttering, resulting in a more fluid scrolling experience. Granular Control: You can provide particular targets and thresholds for observing element visibility with Intersection Observer's second parameter, which is an options object. This gives you more control and flexibility by allowing you to selectively watch and respond to changes in particular parts or sections of a page. Better Resource Management: Intersection Observer helps to optimize the use of system resources by ke

Apr 4, 2025 - 00:00
 0
Using Intersection Observer API in React

Introduction

There are different reasons to perform some functionalities or animation effects when a user scrolls on a web page. Examples of this could be to toggle a class, to conditionally render different components based on scroll or a certain element position, or to animate elements in and out of the viewport. There are also several ways to get this done; we can use scroll event listeners, scroll animation libraries, or JavaScript's Intersection Observer API.

In this article, we will explore the benefits and drawbacks of these approaches and also go on to discuss further the Intersection Observer API and how it can be used in React.

Prerequisites

Before we proceed, it is important to note that a basic knowledge of HTML, CSS, JS, and React is crucial to fully understanding the concepts discussed in this article. That being said, let's get into it!

Scroll Event Listeners

If you want to make an event happen on Scroll, it is probably a no-brainer to go with a Scroll event listener, as that will give you exactly what you want... initially. But as I'm sure there will be other edge cases to consider in a real-life project, you'll soon realize that this brings even more trouble because this said event would then happen every time the user scrolls on the webpage. Unless in specific use cases, this will ultimately become annoying to the user and eventually lead to some issues, such as;

  • Performance: Scroll event listeners trigger an event every time the user scrolls the page, which can lead to a high number of events being fired. Handling these events in real-time can be computationally expensive and cause performance issues, especially on complex web pages or on devices with limited resources.

  • Jank and Stuttering: When scroll event listeners are used to update elements on the page, such as animating or manipulating DOM elements, it can result in janky and stuttering scrolling experiences. This occurs because the scroll events are processed in the main thread, potentially blocking other critical operations.

  • Lack of Control: Scroll events fire continuously while scrolling, even if you're only interested in specific points or sections on the page. This can make it challenging to optimize code or trigger actions at specific scroll positions.

Scroll Animation Libraries

Animation is one of the most common usages of scroll events. Having elements fade in and fade out, changing shapes and styles as the user scrolls through the webpage, has been a game changer in designing aesthetically pleasing websites.

My personal top two animation libraries for React are Framer Motion and GSAP. These libraries are hands down the best out there right now, in my opinion, and are more than capable of bringing wild creative imaginations to life.

But most times, it is just best to really keep simple things simple. Sure using animation libraries may be fancy and whatnot, but if what you're trying to do is straightforward and simple enough, I see no reason to bloat up your code base with another library when you can achieve the same thing with a built-in Javascript API.

Intersection Observer API

While working on an open-source project I'm contributing to over the past week, there was a need to implement the design of a component that changes state based on its position in the viewport. I knew that I didn't want the state change to happen just on scroll, and I also did not want to install any third-party package unless it was absolutely necessary. After much research and trial, Intersection Observer API gave me the perfect solution I was looking for, which was the main motivation behind this article.

The IntersectionObserver() is a JavaScript API designed specifically for efficiently observing changes in the intersection of an element with its parent container or the viewport. Apart from the already mentioned need to keep things simple, it also offers the following improvements over scroll event listeners:

  • Performance Optimization: Intersection Observer is designed to optimize performance by providing a callback that executes when elements enter or exit the viewport or another defined area. This approach reduces the number of events fired and allows the browser to handle the observations more efficiently.

  • Asynchronous Execution: The scrolling and layout operations are separated from the JavaScript execution via the Intersection Observer API's asynchronous operation. This division eliminates jank and stuttering, resulting in a more fluid scrolling experience.

  • Granular Control: You can provide particular targets and thresholds for observing element visibility with Intersection Observer's second parameter, which is an options object. This gives you more control and flexibility by allowing you to selectively watch and respond to changes in particular parts or sections of a page.

  • Better Resource Management: Intersection Observer helps to optimize the use of system resources by keeping track of element visibility. It enables you to save bandwidth and enhance efficiency by allowing you to load or unload content, lazy load images, or activate animations only when necessary.

Enough talk. Show me the code!

Now we are going to build a simple project just to demonstrate how the Intersection Observer API works and how we can use it within a React project. The aim of this project is simply to change the styles of the navigation bar and also make it stick to the top of the page when the user scrolls.

We start by bootstrapping a React project with Vite by navigating to a preferred directory and running the following commands:

npm create vite@latest
// select Typescript as the preferred language, and
// specify the project name, here it is react-intersection-observer 

cd react-intersection-observer

npm install

npm run dev

After running these commands, we should have our React project running in the browser

demo image

Go ahead and delete index.css file as we won't be needing it and in App.css, add the following code:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}

.sentinel {
  background-color: skyblue;
  height: 5px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: skyblue;
  padding: 2rem;
}

.stuck {
  position: sticky;
  top: 0px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  color: #fff;
  transition: all 0.3s;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  width: 90%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 10px;
  padding: 50px;
  margin: 50px 0;
}

.title {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.content {
  color: #999ea9;
  line-height: 2rem;
  text-align: justify;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  color: #fff;
  background-color: skyblue;
}

@media screen and (min-width: 768px) {
  section {
    width: 60%;
  }
}

The above style declarations contain all the styling required for the finished project. Nothing fancy going on, just basic CSS to make everything look clean.

In main.tsx, remove the import for index.css and leave everything else as is.

Now, in the App.tsx, this is where everything comes together. Go ahead and replace everything with the following code:

import { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {
  const [intersecting, setIntersecting] = useState<boolean>(true);
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  const navRef = useRef<HTMLDivElement | null>(null);
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    treshold: 1.0
  };

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) {
        setIntersecting(true);
        navRef.current?.classList.add('stuck');
      } else {
        setIntersecting(false);
        navRef.current?.classList.remove('stuck');
      }
    }, observerOptions);

    if (sentinelRef.current !== null) {
      observer.observe(sentinelRef.current);
    }
  });

  return (
    <main>
      <div className="sentinel" ref={sentinelRef}></div>

      <nav ref={navRef} className="navbar">
        <h2>Hashnode Articles</h2>
        <h3>Emmanuel Oloke</h3>
      </nav>

      <div className="container">
        <section>
          <h1 className="title">Using Intersection Observer API in React</h1>
          <article className="content">
            There are different reasons to perform some functionalities or animation effects when a
            user scrolls on a web page. Examples of this could be to toggle a class, to
            conditionally render different components based on scroll or a certain element position,
            or to animate elements in and out of the viewport. There are also various ways to get
            these done; we can use scroll event listeners, scroll animation libraries, or
            Javascript's IntersectionObserver API. In this article, we will explore the benefits and
            drawbacks of these approaches and also go on to discuss further the IntersectionObserver
            API and how it can be used in React...