React Code Interview 001: Intersection Observer API 101

Exploring the power of IntersectionObserver and why it’s a must-know for React interviews.

Jan 14, 2025

Hello there, and welcome to the first installment of my new React Code Interview series! Each issue will focus on a real-world challenge—topics that crop up in actual interviews and day-to-day development. Rather than just abstract theory, you’ll get practical snippets, tips, and guidance you can plug directly into your own projects.

In this kickoff edition, we’re tackling the IntersectionObserver—a must-know API for optimizing performance and user experience. Think of it as a cleaner way to track whether elements (like images or quotes) appear in the viewport, without resorting to hacky scroll events.

Ever publish (or read) a long-form, image-heavy article, only for it to load sluggishly—especially on a slow connection? Or maybe you’ve scrolled through Amazon’s product detail pages, where a “Customers Also Bought” section appears just as you get there, instead of dumping all the data up front. Or even in JIRA, where the user list loads more user profiles only when you scroll further down.

The secret to these smooth, on-demand loading experiences is often IntersectionObserver.

A Personal Pain Point

I love writing detailed, image-heavy articles (like my Headless Component piece on martinfolwer.com). But if someone opens them on the train, they end up loading everything upfront—and might bail before reaching the best parts. IntersectionObserver lets you delay loading content until the user actually scrolls to that section.

Amazon, JIRA, and Beyond

Amazon’s “Customers Also Bought” Loads a fresh product carousel only when you scroll near it—powered by intersection logic.
JIRA’s User List Shows more users on-demand as you keep scrolling, avoiding massive up-front loads.
Your Next React Interview Implementing lazy-loading or infinite scrolling with IntersectionObserver is a popular front-end challenge, testing both JS know-how and user-centric thinking.

Quick Code Snippet

Below is a typical setup. When the target intersects with #root (by 10% in this example), the callback fires—perfect for loading extra data on demand.

const options = {
  root: document.querySelector("#root"),  // scrollable container
  rootMargin: "0px",
  threshold: 0.1, // fire callback at 10% visibility
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Element is in view! Load more data, fetch images, etc.
    }
  });
}, options);

observer.observe(document.querySelector(".lazy-section"));

root: The element where we track visibility (null = full viewport).
rootMargin: Trigger earlier or later by adjusting this margin (e.g., "100px" or "-100px").
threshold: The portion of the element that must be visible before firing the callback.

Why This Matters (Interviews & Daily Dev)

Performance & UX No bloated initial page loads—only fetch what the user actually sees.
Clean, Declarative Approach Less error-prone and more maintainable than manual scroll listeners.
Interview Gold Shows you can tackle real-world optimizations (lazy-loading, infinite scrolling) with modern APIs.

See It in Action

In my quotes list demo, I show you how to:

Set up IntersectionObserver in React.
Configure thresholds and root margins.
Trigger actions only when the next quote is on screen.

Coming Up Next

This year, I’m rolling out more React Code Interview-style challenges—covering infinite scrolling with pagination, React Query, building a slider, and more. These techniques aren’t just for interviews; they’ll level up your everyday coding, too.

Got a suggestion? Just hit reply and let me know!

Thanks for reading,

Juntao Qiu