Apa saja perangkap umum dengan array dependensi useEffect dan pembersihan?

Question

Accepted Answer

Efek dijalankan kembali berdasarkan **dependensinya**, dan mendapatkan array itu salah adalah sumber bug React #1.

## Perangkap 1: dependensi yang hilang → nilai ketinggalan zaman

Sebuah efek menutup nilai dari render tempat dibuat. Jika Anda menghilangkan dependensi, itu terus menggunakan yang lama:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Perbaikan: tambahkan `count` ke deps, atau gunakan updater fungsional yang tidak membutuhkannya (`setCount(c => c + 1)`).

## Perangkap 2: dependensi tidak stabil → efek berjalan setiap render

Objek/array/fungsi dibuat ulang setiap render, jadi mereka "baru" setiap waktu dan efek tidak pernah stabil:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Perbaikan: bergantung pada primitif (`[id]`), atau memoize dengan `useMemo`/`useCallback`.

## Mengapa ini penting

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Tanpa pembersihan, permintaan sebelumnya yang lambat dapat diselesaikan *setelah* yang lebih baru dan menimpa data segar (kondisi race), dan langganan/timer akan menumpuk. Aturan ESLint `react-hooks/exhaustive-deps` menangkap sebagian besar kasus dependensi yang hilang.