javascript / intermediate
Snippet
Synchrones Layout mit useLayoutEffect
useLayoutEffect wird synchron nach allen DOM-Mutationen ausgeführt, aber bevor der Browser die Möglichkeit zum Zeichnen hat. Dies ist wichtig für Messungen von Elementen und Anpassungen, um visuelles Flackern zu vermeiden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function Tooltip({ text }) {const [height, setHeight] = useState(0);const ref = useRef(null);useLayoutEffect(() => {const rect = ref.current.getBoundingClientRect();setHeight(rect.height);}, [text]);return <div ref={ref} style={{ top: -height }}>{text}</div>;}
react
Erklärung
1
useLayoutEffect(() => { ... }, [text]);
Führt Logik nach den DOM-Updates, aber vor dem Neuzeichnen aus.
2
ref.current.getBoundingClientRect();
Misst Größe und Position des DOM-Elements synchron.