React Lifecycle (วงจรชีวิตของคอมโพเนนต์)

React Lifecycle คืออะไร?

Lifecycle ใน React หมายถึง "วงจรชีวิต" ของคอมโพเนนต์ ตั้งแต่เกิดขึ้น (Mount) มีการอัปเดต (Update) จนกระทั่งถูกลบออก (Unmount) จาก DOM

ใน React ปัจจุบัน เราสามารถเขียนคอมโพเนนต์ได้ 2 แบบ:

• Class Component (แบบเก่า)
• Function Component (แบบใหม่: React Hooks)

แต่ละแบบมีวิธีจัดการ Lifecycle ต่างกัน ดังนี้

---

1. Lifecycle ใน Class Component (แบบเก่า)

Class Component มีเมธอดพิเศษสำหรับจัดการแต่ละช่วงของ Lifecycle เช่น

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // กำหนด state เริ่มต้น
  }

  componentDidMount() {
    // เรียกหลังจาก render ครั้งแรก (Mount)
  }

  componentDidUpdate(prevProps, prevState) {
    // เรียกทุกครั้งที่มีการอัปเดต (Update)
  }

  componentWillUnmount() {
    // เรียกก่อนถูกลบออกจาก DOM (Unmount)
  }

  render() {
    return <div>Hello</div>;
  }
}

สรุปเมธอดสำคัญ

เมธอด	ช่วงเวลา	ใช้ทำอะไร
constructor	ก่อน render ครั้งแรก	กำหนด state, bind method
componentDidMount	หลัง render ครั้งแรก	ดึงข้อมูล, set up subscription
componentDidUpdate	หลัง update (props/state)	ทำงานเมื่อค่ามีการเปลี่ยน
componentWillUnmount	ก่อนถูกลบออกจาก DOM	ล้าง resource, ยกเลิก subscription

---

2. Lifecycle ใน Function Component (แบบใหม่: React Hooks)

Function Component ไม่มีเมธอด lifecycle แบบ class แต่ใช้ Hooks แทน โดยเฉพาะ useEffect ซึ่งสามารถจำลองพฤติกรรม lifecycle ต่าง ๆ ได้

import { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  // ทำงานเหมือน componentDidMount + componentDidUpdate
  useEffect(() => {
    // โค้ดนี้จะรันทุกครั้งที่ render และ update
  });

  // ทำงานเหมือน componentDidMount (รันครั้งเดียว)
  useEffect(() => {
    // โค้ดนี้จะรันครั้งเดียวหลัง mount
  }, []);

  // ทำงานเหมือน componentWillUnmount
  useEffect(() => {
    return () => {
      // cleanup code
    };
  }, []);

  return <div>{count}</div>;
}

สรุปการใช้ useEffect

รูปแบบ useEffect	เทียบกับ Class Lifecycle
useEffect(() => {...})	componentDidMount + componentDidUpdate
useEffect(() => {...}, [])	componentDidMount (รันครั้งเดียว)
useEffect(() => {...}, [dep])	componentDidUpdate (เมื่อ dep เปลี่ยน)
useEffect(() => { return ... }, [])	componentWillUnmount (cleanup)

---

ตารางเปรียบเทียบ Lifecycle: Class vs Function

ช่วงเวลา	Class Component	Function Component (Hooks)
Mount	constructor, componentDidMount	useEffect(() => {...}, [])
Update	componentDidUpdate	useEffect(() => {...}, [dep])
Unmount	componentWillUnmount	useEffect(() => { return ... }, [])

---

ตัวอย่างเปรียบเทียบแบบเห็นภาพ

Class Component

class Timer extends React.Component {
  state = { count: 0 };
  intervalId;
  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.intervalId);
  }
  render() {
    return <div>{this.state.count}</div>;
  }
}

Function Component (Hooks)

import { useEffect, useState } from "react";
function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id); // cleanup
  }, []);
  return <div>{count}</div>;
}

---

ข้อควรระวังและ Best Practices

• ปัจจุบันแนะนำให้ใช้ Function Component + Hooks เพราะโค้ดกระชับ เข้าใจง่าย และรองรับฟีเจอร์ใหม่ ๆ ของ React
• หลีกเลี่ยงการใช้ Class Component เว้นแต่จำเป็นหรือโค้ดเก่ายังต้องรองรับ
• ใช้ useEffect อย่างระมัดระวัง อย่าลืมใส่ dependency array ให้ถูกต้อง
• Hooks อื่น ๆ ที่เกี่ยวข้องกับ lifecycle เช่น useLayoutEffect, useInsertionEffect

---

สรุป

• Lifecycle คือการจัดการช่วงชีวิตของคอมโพเนนต์
• Function Component + Hooks คือแนวทางที่ React แนะนำในปัจจุบัน
• เข้าใจ lifecycle ช่วยให้เขียนโค้ดที่ปลอดภัยและดูแลรักษาง่ายขึ้น