มีข้อผิดพลาดที่พบบ่อยใดบ้างกับ useEffect dependency array และ cleanup?

Question

IT Interview Practice · Accepted Answer

Effect จะทำงานซ้ำตามตัวที่มันขึ้นอยู่กับ (dependencies) และการใส่ array ไม่ถูกต้องนั้นเป็นสาเหตุ #1 ของ React bugs

## ทำไมมันจึงสำคัญ

Effect จะ "จำ" ค่าต่างๆ จากการ render ที่มันถูกสร้างขึ้น หากคุณละเว้น dependency ใด effect จะยังคงใช้ค่าเก่าที่อยู่:

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

แก้ไข: เพิ่ม `count` ลงใน deps หรือใช้ functional updater ที่ไม่ต้องการมัน (`setCount(c => c + 1)`).

## Pitfall 2: dependencies ไม่เสถียร → effect ทำงานทุกครั้งที่มีการ render

Objects/arrays/functions จะถูกสร้างใหม่ในแต่ละ render ดังนั้นมันจึง "ใหม่" ทุกครั้ง และ effect จึงไม่มีวันหยุด:

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

แก้ไข: ขึ้นอยู่กับ primitive (`[id]`) หรือใช้ memoization กับ `useMemo`/`useCallback`.

## Pitfall 3: ลืม cleanup → leaks และ race conditions

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

หากไม่มี cleanup request เก่าที่ช้ากว่าอาจสำเร็จ *หลังจาก* request ใหม่ และเขียนทับข้อมูลใหม่ (race condition) และ subscriptions/timers จะสะสมขึ้น ESLint rule `react-hooks/exhaustive-deps` สามารถจับกรณี missing-dependency ส่วนใหญ่ได้

ทำไมมันจึงสำคัญ

Pitfall 2: dependencies ไม่เสถียร → effect ทำงานทุกครั้งที่มีการ render

Pitfall 3: ลืม cleanup → leaks และ race conditions

คำถามที่เกี่ยวข้อง