React useIntersectionObserver Hook: Lazy Load & Detect Visibility (2026)

Short summary

useIntersectionObserver is a browser API that detects when elements enter the viewport asynchronously, replacing janky scroll listeners and expensive re-layouts. The @reactuses/core hook integrates it into React, eliminating boilerplate and preventing three common lifecycle bugs: cleanup leaks, stale closures, and code duplication. Master three patterns: prefetch-aware lazy loading, visibility tracking, and infinite-scroll sentinels.

• •useIntersectionObserver fires asynchronously off the main thread, avoiding janky scrolling from scroll listeners
• •The hook prevents three common bugs: lifecycle leaks, stale closures, and duplicated boilerplate across components
• •rootMargin and threshold customize visibility detection, e.g., preload images 200px before they scroll into view

Generated with AI, which can make mistakes.