Snippet Dec 15, 2025 2 min read
Production-Ready useIntersectionObserver Hook
import { useEffect, useRef, useState } from 'react';
export function useIntersectionObserver(
options: IntersectionObserverInit = {}
) {
const elementRef = useRef(null);
const [isIntersecting, setIsIntersecting] = useState(false);
useEffect(() => {
const element = elementRef.current;
if (!element) return;
const observer = new IntersectionObserver(([entry]) => {
setIsIntersecting(entry.isIntersecting);
}, options);
observer.observe(element);
return () => {
observer.unobserve(element);
};
}, [options]);
return [elementRef, isIntersecting] as const;
}
Tags
#React#Hooks#Performance