Apa wae pitfall umum karo array dependensi useEffect lan cleanup?

Question

Accepted Answer

Sawijining effect bakal nglari maneh adhedhasar **dependencies**-ne, lan yen array-ne salah iku minangka sumber #1 bug React.

## Pitfall 1: dependensi ilang → nilai lawas

Sawijining effect nutup nilai saka render nalika iki digawe. Yen sampeyan ilangake dependensi, iku terus nggunakake sing lawas:

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

Cara ngatasi: nambahake `count` menyang deps, utawa nggunakake functional updater sing ora perlu (`setCount(c => c + 1)`).

## Pitfall 2: dependensi ora stabil → effect nglari saben render

Objek/array/fungsi digawe menyang ulang saben render, mula iku "anyar" saben wektu lan effect ora bakal stabil:

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

Cara ngatasi: ngandelake primitive (`[id]`), utawa memoize karo `useMemo`/`useCallback`.

## Pitfall 3: cleanup lali → leaks & 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]);
```

Besok cleanup, permintaan sing lambat bisa terselesaikan *sawise* sing luwih anyar lan ngganti data seger (race condition), lan subscription/timer bakal numpuk. Rule ESLint `react-hooks/exhaustive-deps` nangkep ketinggalan-dependensi paling akeh.