Apakah perangkap biasa dengan array kebergantungan useEffect dan pembersihan?

Question

Accepted Answer

Sesuatu effect dijalankan semula berdasarkan **kebergantungannya**, dan menyalahkan array itu ialah punca pepijat React nombor #1.

## Perangkap 1: kebergantungan yang tertinggal → nilai basi

Sesuatu effect menutup (closes over) nilai daripada render tempat ia dicipta. Jika anda meninggalkan sesuatu kebergantungan, ia 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
```

Penyelesaian: sama ada tambah `count` kepada deps, atau gunakan functional updater yang tidak memerlukannya (`setCount(c => c + 1)`).

## Perangkap 2: kebergantungan tidak stabil → effect dijalankan setiap render

Objek/array/fungsi dicipta semula pada setiap render, jadi ia "baharu" setiap kali dan effect itu tidak pernah reda:

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

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

## Perangkap 3: pembersihan yang terlupa → kebocoran & perlumbaan (races)

```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, sesuatu permintaan terdahulu yang perlahan boleh selesai *selepas* yang lebih baharu dan menulis ganti data segar (suatu race condition), dan langganan/pemasa akan bertimbun. Peraturan ESLint `react-hooks/exhaustive-deps` menangkap kebanyakan kes kebergantungan yang tertinggal.