Ambele rulează efecte, dar la momente diferite în raport cu pictarea browserului — iar această diferență de timing este exact punctul.
useEffect rulează după ce browserul a pictat. Este asincron și non-blocant. Folosește-l pentru aproape orice (date, abonări, logging).useLayoutEffect rulează sincron după ce DOM-ul este modificat, dar ÎNAINTE ca browserul să picteze. Folosește-l când trebuie să citești layout-ul și să modifici DOM-ul în același frame pentru a evita o pâlpâire vizibilă.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Imaginez că măsori un element și repoziționezi un tooltip pe baza dimensiunii sale. Cu useEffect, utilizatorul ar vedea scurt tooltip-ul în locul greșit, apoi sare:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Cu useEffect, același cod rulează după pictare → o pâlpâire pe un singur frame.
useLayoutEffect face ca interfața să pară tremurândă, deoarece browserul nu poate picta până nu se termină.Regulă de aur: implicit folosește useEffect; folosește useLayoutEffect doar pentru măsurători/modificări sincrone ale DOM-ului care altfel ar pâlpâi.