Web Performance: Lazy Loading with Intersection Observer

A common web performance and browser optimization question is:

What is the Intersection Observer API? How does it differ from traditional scroll event listeners for implementing lazy loading or infinite scrolling, and how do you implement a custom React hook for it?

Historically, lazy loading images or triggering infinite scroll pagination required attaching event listeners to the window's scroll event. Because scroll events fire continuously and run on the browser's main thread, calculating element positions manually caused severe layout thrashing and stuttering. The native IntersectionObserver API provides a highly performant, asynchronous alternative.

1. Traditional Scroll Listeners vs. Intersection Observer

The Old Way: Scroll Listeners (Performance Bottleneck)

To check if an element was in the viewport, developers wrote:

// ❌ INEFFICIENT: Runs on the main thread and forces layout reflows!
window.addEventListener('scroll', () => {
  const rect = element.getBoundingClientRect();
  if (rect.top < window.innerHeight && rect.bottom >= 0) {
    console.log("Element is in viewport!");
  }
});

• Main Thread Clogging: Scroll events fire dozens of times per second. Running JavaScript code on every scroll frame delays rendering.
• Layout Thrashing: Calling getBoundingClientRect() forces the browser to recalculate the page layout synchronously (reflow), causing visible scroll stuttering (jank).

The New Way: Intersection Observer (Asynchronous)

The IntersectionObserver API lets you register a callback that fires automatically whenever a target element enters or exits the viewport (or a specified container):

• Asynchronous Execution: The browser handles intersection calculations off the main thread, executing your JS callback only when the threshold is crossed.
• No Reflow Checks: Eliminates the need to call getBoundingClientRect() manually.

2. Implementing a Custom Lazy Image Component in React

Here is how to build a lazy-loaded image component using a custom Intersection Observer hook:

The Custom Hook (useIntersectionObserver)

import { useState, useEffect, useRef } from 'react';
 
export function useIntersectionObserver(options?: IntersectionObserverInit) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const elementRef = useRef<HTMLElement | null>(null);
 
  useEffect(() => {
    const currentElement = elementRef.current;
    if (!currentElement) return;
 
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);
 
    observer.observe(currentElement);
 
    return () => {
      if (currentElement) {
        observer.unobserve(currentElement);
      }
    };
  }, [options]);
 
  return [elementRef, isIntersecting] as const;
}

The Lazy Image Component

import React from 'react';
import { useIntersectionObserver } from './useIntersectionObserver';
 
export function LazyImage({ src, alt, placeholderSrc }) {
  const [ref, isIntersecting] = useIntersectionObserver({
    rootMargin: '200px', // Start loading when the image is 200px below the viewport
    threshold: 0.01,
  });
 
  return (
    <div ref={ref} className="image-wrapper" style={{ minHeight: '300px' }}>
      <img
        src={isIntersecting ? src : placeholderSrc}
        alt={alt}
        className={isIntersecting ? 'loaded' : 'loading'}
      />
    </div>
  );
}

3. Key Parameters of Intersection Observer

When instantiating an observer, you can configure three options:

• root: The element that acts as the viewport. Defaults to null (the browser viewport).
• rootMargin: A set of margins around the root (e.g. '200px 0px'). This lets you grow or shrink the observer's bounding box, allowing you to load resources before they actually hit the screen.
• threshold: A single number or array of numbers indicating what percentage of the target's visibility (e.g. 0.5 for 50%) is required before triggering the callback.

Senior-Level Interview Answer

The Intersection Observer API provides an asynchronous way to track when a DOM element intersects the browser viewport or a parent container. Traditional implementations relying on window scroll event listeners bound computation logic to the browser's render thread and forced synchronous layout reflows via queries like getBoundingClientRect(). In contrast, IntersectionObserver offloads intersection detection to the browser's internal engine, running the JS callback asynchronously only when defined visibility thresholds are crossed. For performance optimization, we use the rootMargin parameter to pre-fetch off-screen resources (such as loading images 200 pixels before they enter the viewport) and disconnect observers immediately once resources load to prevent resource leaks.

Common Interview Mistakes

❌ Forgetting to unobserve / disconnect elements

When implementing custom hooks, failing to call observer.unobserve(element) inside the cleanup function of useEffect. If elements are added and removed from the page dynamically, failing to clean up active observers causes memory leaks and slows down the browser.

❌ Omitting layout sizing (causing layout shifts)

Lazy loading images without defining a fixed height or aspect ratio placeholder on the container wrapper. When the image suddenly loads, it will push content down, causing a major Cumulative Layout Shift (CLS) penalty.

Key Takeaways

• Asynchronous Tracking: Intersection Observer queries bounds asynchronously, preventing main-thread layout thrashing.
• Scroll Optimization: Replaces continuous scroll event polling loops with specific callback triggers.
• Pre-fetching Margin: Use rootMargin to expand detection boundaries, loading images before they scroll into view.
• Observer Cleanup: Always disconnect or unobserve elements inside component unmount functions to avoid memory leaks.
• Layout Shift Control: Maintain placeholder dimensions on wrappers to prevent content from jumping when lazy images load.