javascript / expert
Snippet
Eigener Hook: useIntersectionObserver mit Ref-Stabilität und Callback-Refs
Die Verwendung eines statusbasierten Callback-Refs ([setNode]) anstelle eines Standard-useRef stellt sicher, dass der IntersectionObserver korrekt neu bindet, wenn das Element bedingt gerendert wird. Dieses Muster ist entscheidend für performantes Lazy-Loading und Infinite Scroll in React.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useState, useEffect, useRef } from 'react';export function useIntersectionObserver(options: IntersectionObserverInit) {const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);const [node, setNode] = useState<Element | null>(null);const observer = useRef<IntersectionObserver | null>(null);useEffect(() => {if (observer.current) observer.current.disconnect();observer.current = new IntersectionObserver(([e]) => setEntry(e), options);if (node) observer.current.observe(node);return () => observer.current?.disconnect();}, [node, options]);return [setNode, entry] as const;}
nextjs
Erklärung
1
const [node, setNode] = useState
Verwendet einen statusbasierten Callback-Ref, um sicherzustellen, dass der Observer neu bindet, wenn sich das DOM-Element ändert.
2
observer.current.disconnect()
Wichtige Bereinigung, um Speicherlecks und redundante Beobachtungen bei Änderungen der Abhängigkeiten zu vermeiden.