Oba spouštějí effects, ale v různých momentech vůči vykreslení prohlížeče — a právě tento časový rozdíl je celý smysl.
useEffect se spustí poté, co prohlížeč vykreslí stránku. Je asynchronní a neblokující. Použijte ho na skoro všechno (data, odběry, logování).useLayoutEffect se spustí synchronně poté, co je DOM změněn, ale PŘED vykreslením prohlížeče. Použijte ho, když musíte přečíst rozložení a změnit DOM ve stejném snímku, abyste se vyhnuli viditelné chvění.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Představte si, že měříte prvek a přemisťujete popis vzhledem k jeho velikosti. S useEffect by uživatel krátce viděl popis na špatném místě a pak by se posunul:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
S useEffect běží stejný kód po vykreslení → chvění v jednom snímku.
useLayoutEffect činí uživatelské rozhraní trhavým, protože prohlížeč nemůže vykreslit, dokud se nedokončí.Praktické pravidlo: defaultně používejte useEffect; useLayoutEffect používejte pouze pro synchronní měření/změny DOM, která by jinak chvěla.