useLayoutEffect & useInsertionEffect
Messen und korrigieren, bevor der Browser malt
Fast wie useEffect – läuft aber schon, bevor der Browser das Bild anzeigt. Damit verhinderst du sichtbares Zucken.
Diesen Hook brauchst du selten. Er ist für genau einen Fall da: Du musst etwas ausmessen und daraufhin sofort die Position ändern – und der Nutzer soll den Zwischenschritt nicht sehen.
Zeichnen → Seite anpassen → useLayoutEffect → Browser zeigt an → useEffect
▲ hier wartet der Browser ▲ hier nicht mehrBeide Hooks schreibst du völlig gleich. Der einzige Unterschied ist der Zeitpunkt – und der entscheidet, ob man einen Zwischenzustand aufblitzen sieht.
useEffect ist „Bild ist im Rahmen, jetzt noch schnell den Rahmen geradeziehen“ – man sieht es kurz schief hängen. useLayoutEffect richtet den Rahmen, bevor der Vorhang aufgeht.
Der typische Fall: messen und positionieren
function Tooltip({ ziel, children }) {
const ref = useRef<HTMLDivElement>(null);
const [oben, setOben] = useState(0);
useLayoutEffect(() => {
const hoehe = ref.current!.getBoundingClientRect().height;
const platz = ziel.getBoundingClientRect().top;
setOben(platz < hoehe ? platz + 20 : platz - hoehe); // unten statt oben
}, [ziel]);
return <div ref={ref} style={{ top: oben }}>{children}</div>;
}- +
DOM messen und daraufhin sofort Position/Größe korrigieren (Tooltips, Popover, Dropdowns)
- +
Scrollposition setzen, bevor der Nutzer den Sprung sieht
- +
Ein Flackern, das du im Browser tatsächlich beobachtest
- −
Alles andere –
useEffectist der Standard - −
Datenladen, Abos, Timer
- −
Server-Rendering:
useLayoutEffectläuft dort nicht und warnt in der Konsole
Alles in useLayoutEffect läuft, bevor der Nutzer etwas sieht. Viel Arbeit an dieser Stelle lässt die Seite spürbar hängen. Nimm es nur, wenn du ein Zucken behebst, das du wirklich beobachtet hast.
▸ Genauer erklärt: Server-Rendering und useInsertionEffect optional
Beim Server-Rendering (SSR)Die Seite wird schon auf dem Server als fertiges HTML erzeugt, damit der Browser sofort etwas anzeigen kann.→ gibt es keine Seite zum Ausmessen – der Hook läuft dort schlicht nicht, und React warnt in der Konsole. Übliche Lösungen: die Komponente nur im Browser zeichnen, oder auf useEffect ausweichen.
Der läuft noch früher – bevor React überhaupt etwas an der Seite ändert. Er existiert praktisch nur, damit Styling-Bibliotheken ihre <style>-Blöcke einfügen können, ohne Messungen zu verfälschen. In eigenem Code brauchst du ihn nie.
Sitzt das schon?
3 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.