useEffect คืออะไร และมันทำงานเมื่อไร?

Question

IT Interview Practice · Accepted Answer

`useEffect` รันผลข้างเคียง — งานที่ไปนอก React rendering เช่น data fetching, subscriptions, timers, หรือ manual DOM updates. มันรันหลังจากที่ component render **หลังจาก** component render ทำให้ผลข้างเคียงอยู่นอก render body (render ต้องอยู่สะอาด).

## Dependency array ควบคุมเวลา

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → รันหลังจาก render ครั้งแรกและเมื่อใดก็ตามที่ `count` เปลี่ยนแปลง.
- **`[]`** (ว่าง) → รัน **ครั้งเดียว** หลังจาก mount (ดีสำหรับการตั้งค่าครั้งเดียว).
- **ละเว้น** → รันหลังจาก **ทุก** render (ไม่ค่อยเป็นสิ่งที่คุณต้องการ).

## Cleanup: return a function

ถ้า effect ตั้งค่าบางสิ่งบางอย่างที่ต้องถูกแก้ไข ให้ return cleanup function. React จะเรียกมันก่อน effect run ครั้งต่อไป และเมื่อ component unmount:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

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

หากไม่มี ทุกครั้งที่รัน would add another timer/subscription และไม่เคยลบตัวเก่า — memory leak แบบคลาสสิก. Lifecycle สำหรับ `[dep]` effect คือ: *run effect → (dep changes) → run cleanup → run effect again*.

**Tip:** อย่าใช้ effects สำหรับสิ่งที่คุณสามารถคำนวณได้ในระหว่าง render (derive values แทน) และรวมทุกค่าที่ effect อ่านใน dependency array (the `react-hooks/exhaustive-deps` lint rule ช่วยได้).

Dependency array ควบคุมเวลา

Cleanup: return a function

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

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