Apa perbedaan antara useEffect dan useLayoutEffect?

Question

Accepted Answer

Keduanya menjalankan efek, tetapi pada **momen-momen berbeda relatif terhadap cat browser** — dan perbedaan waktu itulah seluruh intinya.

- **`useEffect`** berjalan **setelah** browser telah melukis. Itu asinkron dan non-blocking. Gunakan untuk hampir semuanya (data, langganan, logging).
- **`useLayoutEffect`** berjalan **secara sinkron setelah DOM dimutasi tetapi SEBELUM browser melukis**. Gunakan ketika Anda harus membaca tata letak dan mengubah DOM dalam frame yang sama untuk menghindari flicker yang terlihat.

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

## Mengapa ini penting

Bayangkan mengukur elemen dan memposisikan ulang tooltip berdasarkan ukurannya. Dengan `useEffect`, pengguna akan melihat tooltip di tempat yang salah sebentar, kemudian melompat:

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

Dengan `useEffect`, kode yang sama berjalan setelah cat → flicker satu bingkai.

## Mengapa Anda tidak boleh menggunakannya secara default

- Itu **memblokir cat**: pekerjaan berat di `useLayoutEffect` membuat UI terasa tersentak, karena browser tidak dapat melukis sampai selesai.
- Itu **memperingatkan selama SSR** (itu tidak dapat berjalan di server, di mana tidak ada tata letak).

**Aturan praktis:** default ke `useEffect`; hanya gunakan `useLayoutEffect` untuk pengukuran DOM/mutasi sinkron yang akan flicker sebaliknya.