Her ikisi de efektler çalıştırır, ama tarayıcı boyaması ile ilgili farklı zamanlarda — ve bu zaman farkı bütün meselenin özü.
useEffect tarayıcı çizdikten sonra çalışır. Asenkron ve engelleyici değildir. Neredeyse her şey için kullanın (veri, abonelikler, günlük kaydı).useLayoutEffect DOM mutasyondan sonra ama tarayıcı çizmeden önce eşzamanlı olarak çalışır. Görünür titreme olmadan aynı karede layout okuyup DOM'u değiştirmeniz gerekiyorsa kullanın.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Bir öğeyi ölçüp boyutuna dayalı bir tooltip'i yeniden konumlandırmayı hayal edin. useEffect ile, kullanıcı tooltip'i kısaca yanlış yerde görecek, sonra atlar:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
useEffect ile, aynı kod boya sonrasında çalışır → bir kare titremesi.
useLayoutEffect içinde ağır işler, tarayıcı bitirene kadar boyayamadığı için UI'nın sarsıntılı hissetmesini sağlar.Başparmak kuralı: useEffect ile başlayın; sadece eşzamanlı DOM ölçümleri/mutasyonları için useLayoutEffect kullanın aksi halde titrerdi.