When to use IntersectionObserver, ResizeObserver, and MutationObserver

Question

Explain which browser observer to use for infinite-scroll detection, element size/position changes, and DOM structure changes. Provide a practical composition pattern for real UIs.

Accepted Answer

// Interview explanation:
// Choose observer by signal type:
// - visibility signal -> IntersectionObserver
// - size signal -> ResizeObserver
// - DOM structure/content signal -> MutationObserver
// Combining them gives robust UI updates without heavy polling.

// Observer choice:
// 1) IntersectionObserver: visibility in viewport/root (e.g. infinite scroll sentinel)
// 2) ResizeObserver: element size changes (e.g. popover width/height changes)
// 3) MutationObserver: DOM tree/content changes (e.g. async content inserted)

function wireDynamicList(listEl, sentinelEl, onLoadMore) {
  const io = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) onLoadMore()
  }, { rootMargin: '200px 0px' })

const ro = new ResizeObserver(() => {
    // recalc layout-dependent positions, sticky offsets, etc.
    requestAnimationFrame(() => {
      // measure and update layout here
    })
  })

const mo = new MutationObserver(() => {
    // content changed -> potentially re-measure / re-attach behaviors
    requestAnimationFrame(() => {
      // sync derived UI state
    })
  })

io.observe(sentinelEl)
  ro.observe(listEl)
  mo.observe(listEl, { childList: true, subtree: true })

return () => {
    io.disconnect()
    ro.disconnect()
    mo.disconnect()
  }
}

// Usage:
const cleanup = wireDynamicList(
  document.querySelector('#list'),
  document.querySelector('#sentinel'),
  () => fetchNextPage()
)
// later: cleanup()

// Follow-up discussion:
// - Batch DOM reads/writes via requestAnimationFrame.
// - Disconnect observers on unmount to avoid leaks.
//
// Common interviewer follow-ups:
// Q: Why not polling or scroll events?
// A: Polling wastes CPU, and scroll handlers are noisy; observers are browser-optimized and event-driven.
// Q: Which observer can trigger too often?
// A: ResizeObserver and MutationObserver; debounce expensive work and batch with rAF.
// Q: How to prevent feedback loops?
// A: Avoid mutating observed nodes directly in callbacks without guards; batch and short-circuit updates.

When to use IntersectionObserver, ResizeObserver, and MutationObserver

Answer