Apakah perbezaan antara useEffect dan useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Kedua-duanya menjalankan effects, tetapi pada **momen berbeza berbanding dengan cat pelayar** — dan perbezaan masa ini adalah keseluruhan perkara.

- **`useEffect`** berjalan **selepas** pelayar telah dicat. Ia adalah asinkron dan tidak menghalang. Gunakan untuk hampir semua perkara (data, langganan, pengelogan).
- **`useLayoutEffect`** berjalan **secara sinkron selepas DOM dimutasi tetapi SEBELUM pelayar dicat**. Gunakan apabila anda mesti membaca tata letak dan mengubah DOM dalam bingkai yang sama untuk mengelakkan kedipan yang kelihatan.

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

## Mengapa anda memerlukan useLayoutEffect

Bayangkan mengukur elemen dan meletakkan semula tooltip berdasarkan saiznya. Dengan `useEffect`, pengguna akan melihat tooltip di tempat yang salah seketika, kemudian ia melompat:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

Dengan `useEffect`, kod yang sama berjalan selepas cat → kedipan satu bingkai.

## Mengapa anda tidak boleh mencapainya secara lalai

- Ia **menghalang melukis**: kerja berat dalam `useLayoutEffect` membuat UI terasa tersentak, kerana pelayar tidak dapat melukis sehingga ia selesai.
- Ia **memberi amaran semasa SSR** (ia tidak boleh berjalan di pelayan, di mana tiada tata letak).

**Peraturan praktikal:** lalai ke `useEffect`; hanya gunakan `useLayoutEffect` untuk pengukuran/mutasi DOM sinkron yang sebaliknya akan kedip.

Mengapa anda memerlukan useLayoutEffect

Mengapa anda tidak boleh mencapainya secara lalai

Soalan berkaitan