useEffect ile useLayoutEffect arasındaki fark nedir?

Question

IT Interview Practice · Accepted Answer

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.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## Neden useLayoutEffect'e ihtiyacınız olabilir

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:

```jsx
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.

## Neden varsayılan olarak buna ulaşmamalısınız

- **Boyamayı engeller**: `useLayoutEffect` içinde ağır işler, tarayıcı bitirene kadar boyayamadığı için UI'nın sarsıntılı hissetmesini sağlar.
- **SSR sırasında uyarır** (sunucuda çalışamaz, layout olmayan yerde).

**Başparmak kuralı:** `useEffect` ile başlayın; sadece eşzamanlı DOM ölçümleri/mutasyonları için `useLayoutEffect` kullanın aksi halde titrerdi.

Neden useLayoutEffect'e ihtiyacınız olabilir

Neden varsayılan olarak buna ulaşmamalısınız

İlgili sorular