javascript / expert
Snippet
Visuelle Synchronisation mit useLayoutEffect und RAF
useLayoutEffect wird synchron nach allen DOM-Mutationen, aber vor dem Paint des Browsers ausgeführt. In Kombination mit requestAnimationFrame ermöglicht dies nahtlose Layout-Anpassungen und Animationen ohne Flackern, da der Browser den 'fehlerhaften' Zustand nicht rendert, bevor die Korrekturen angewendet wurden.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
useLayoutEffect(() => {const element = ref.current;let frameId;const adjustPosition = () => {const rect = element.getBoundingClientRect();if (rect.top < 0) {element.style.transform = `translateY(${Math.abs(rect.top)}px)`;}frameId = requestAnimationFrame(adjustPosition);};frameId = requestAnimationFrame(adjustPosition);return () => cancelAnimationFrame(frameId);}, [dependency]);
react
Erklärung
1
useLayoutEffect
Wird hier verwendet, um das DOM zu messen und Styles anzuwenden, bevor der Benutzer den ersten Frame sieht.
2
requestAnimationFrame
Plant die Funktion vor dem nächsten Paint ein, was für flüssige visuelle Updates sorgt.
3
cancelAnimationFrame(frameId)
Wichtiger Cleanup, um Memory Leaks und unerwartetes Verhalten bei Updates zu vermeiden.