javascript / expert
Snippet
Intersection Observer für fortgeschrittenes Lazy Rendering
Die direkte Integration der Intersection Observer API in React ermöglicht anspruchsvolle Performance-Optimierungen. Durch 'rootMargin' können wir das Rendern schwerer Komponenten auslösen, bevor sie tatsächlich in den Viewport eintreten, was eine nahtlose Benutzererfahrung schafft.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useState, useEffect, useRef } from 'react';function LazyComponent({ children }) {const [isVisible, setIsVisible] = useState(false);const containerRef = useRef(null);useEffect(() => {const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {setIsVisible(true);observer.disconnect();}}, { threshold: 0.1, rootMargin: '100px' });if (containerRef.current) observer.observe(containerRef.current);return () => observer.disconnect();}, []);return (<div ref={containerRef}>{isVisible ? children : <div className="skeleton" />}</div>);}
react
Erklärung
1
observer.disconnect();
Beendet die Beobachtung, sobald das Element sichtbar ist, um Ressourcen zu sparen.
2
rootMargin: '100px'
Erweitert den Erkennungsbereich um 100px um den Viewport für vorausschauendes Laden.
3
{isVisible ? children : ...}
Mountet Kinderkomponenten nur bei Bedarf, was die initiale DOM-Größe reduziert.