custom hook for track elements visibility on screen in react component using ref

useOnScreen.tsx

function useOnScreen(
	ref: React.RefObject<HTMLElement>,
	disconnectAfterIntersect: boolean
) {
	const [isIntersecting, setIntersecting] = useState(false);

	const observer = useMemo(() => {
		return new IntersectionObserver(([entry]) => {
			setIntersecting(entry.isIntersecting);
		});
	}, []);

	useEffect(() => {
		if (!ref.current) return;
		observer.observe(ref.current);
		return () => {
			observer.disconnect();
		};
	}, []);

	useEffect(() => {
		if (isIntersecting && disconnectAfterIntersect) {
			observer.disconnect();
		}
	}, [isIntersecting]);

	return isIntersecting;
}

you can use this custom hook to track nodes visibility on screen using ref