คู่มือ React useEffect Hook: จัดการ Side Effects ใน Functional Component

Hooks และ useEffect คืออะไร?

React Hooks (นำมาตั้งแต่ v16.8) ให้ Functional Component ใช้ State และ Lifecycle Features ได้ useEffect ใช้จัดการ **Side Effects** เช่น Data Fetching, Subscription, หรือการเปลี่ยนแปลง DOM โดยตรง

การ Import Hooks

import React, { useState, useEffect } from 'react';

ตัวอย่าง: Counter พร้อม useState และ useEffect

1. สร้าง State ด้วย useState

const [count, setCount] = useState(0);
const [name, setName] = useState("");

2. ใช้ useEffect แบบ Default (รันทุกครั้งที่ Render)

useEffect(() => {
  setName(name + "Ryan"); // เพิ่มชื่อทุกครั้งที่ render
});

⚠️ ผลลัพธ์: ชื่อ "Ryan" จะถูกเพิ่มซ้ำเรื่อยๆ ทุกครั้งที่กดปุ่ม

3. ใช้ useEffect พร้อม Dependency Array ว่าง (Run only on Mount)

useEffect(() => {
  setName("Ryan");
}, []); // Empty array = run once on mount

✅ ชื่อ "Ryan" แสดงเพียงครั้งเดียวตอน Component Mount

พฤติกรรมของ useEffect

• ไม่มี Dependency Array: รันทุก Render (Mount + Update)
• Dependency Array ว่าง []: รันเฉพาะ Mount (เหมือน componentDidMount)
• Dependency Array มีค่า [count]: รันเมื่อค่าที่ระบุเปลี่ยน

สรุป

useEffect เป็น Hook หลักสำหรับจัดการ Side Effects ใน Functional Component การเข้าใจ Dependency Array สำคัญมากเพื่อควบคุมเวลาที่ Effect ควรทำงาน