เริ่มต้นกับ React Lifecycle

วันนี้เราจะมาคุยเรื่อง React Lifecycle กันหน่อยนะ
ถ้าทุกคน เคยสงสัยว่า component ของ React มันเกิดมา ทำงานยังไง และตายเมื่อไร เรื่องนี้แหละสำคัญมาก ๆ สำหรับคนที่อยากเขียน React ให้เป็นระบบและจัดการกับ "Side Effects" (เช่น การดึงข้อมูล, การสมัคร subscription)

React Lifecycle คืออะไร?

Lifecycle ของ React คือ ช่วงเวลาที่ component มีชีวิตอยู่บนหน้าเว็บ ตั้งแต่ถูกสร้างขึ้น, อัปเดตตัวเอง, จนกระทั่งถูกลบออกไป
มันเหมือนกับชีวิตคนเราเลยครับ: เกิด ➡️ เติบโต ➡️ จากไป 😅

React จะแบ่ง Lifecycle ออกเป็น 3 ช่วงหลัก ๆ:

1. Mounting (การเกิด) – เป็นช่วงที่ component ถูกสร้างขึ้นและถูกใส่เข้าไปใน DOM (หน้าเว็บของเรา) เป็นครั้งแรกสุดเลยครับ เหมือนการปลูกต้นไม้ลงดินครั้งแรก
2. Updating (การเติบโต) – เมื่อ component ได้รับข้อมูลใหม่ (ผ่าน props หรือ state เปลี่ยน) มันจะถูก render ใหม่เพื่อแสดงผลข้อมูลล่าสุด ช่วงนี้คือช่วงที่ component มีการเปลี่ยนแปลงอยู่ตลอดเวลา
3. Unmounting (การจากไป) – เป็นช่วงสุดท้ายของชีวิต component ครับ มันจะถูกลบออกจาก DOM ซึ่งเราต้องจัดการ "เก็บกวาด" สิ่งที่เคยทำไว้ เช่นยกเลิก timer หรือ subscription เพื่อไม่ให้เกิด memory leak

มาดู useEffect กับ Lifecycle กัน

ในยุคของ Functional Components เราจะใช้ Hook ที่ชื่อว่า useEffect เพื่อจัดการกับ Lifecycle ทั้ง 3 ช่วงนี้ครับผม เจ้า useEffect นี่แหละคือเครื่องมือหลักของเราเลย

เรามาลองสร้าง Component จับเวลา ที่จะช่วยให้เห็นภาพ Lifecycle ทั้งหมดกัน

import { useState, useEffect } from "react";
 
export default function Timer() {
  const [seconds, setSeconds] = useState(0);
 
  // useEffect จะจัดการ Lifecycle ให้เรา
  useEffect(() => {
    // ---- ส่วนนี้คือ Mounting ----
    console.log("Component ถูก mount แล้ว! เริ่มนับเวลา ⏰");
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
 
    // ---- ส่วนนี้คือ Unmounting (Cleanup) ----
    return () => {
      console.log("Component กำลังจะ unmount 😢 เก็บกวาดก่อนนะ");
      clearInterval(interval);
    };
  }, []); // <-- Dependency Array ว่างเปล่า หมายถึงให้ทำงานแค่ตอน Mount ครั้งเดียว
 
  // ช่วง Updating จะเกิดขึ้นทุกครั้งที่ state `seconds` เปลี่ยน
  // และทำให้ส่วน JSX ด้านล่างนี้ re-render ใหม่
  useEffect(() => {
    if (seconds > 0) {
      console.log(`เวลาอัปเดตเป็น: ${seconds} วินาที`);
    }
  }, [seconds]); // <-- Effect นี้จะทำงานทุกครั้งที่ `seconds` เปลี่ยน
 
  return <p>เวลา: {seconds} วินาที</p>;
}

มาเจาะลึกโค้ดกันหน่อย

จากโค้ดด้านบน เราใช้ useEffect 2 ตัวเพื่อจัดการกับเหตุการณ์ต่างกัน:

1. useEffect ตัวแรก (สำหรับ Mounting และ Unmounting):

   • การทำงาน: โค้ดที่อยู่ใน useEffect นี้จะทำงาน แค่ครั้งเดียว หลังจากที่ component render ครั้งแรก (Mounting) เพราะเราใส่ [] (dependency array ที่ว่างเปล่า) เข้าไป
   • เราทำอะไร?: เราสั่ง setInterval เพื่อให้นับเลขเพิ่มขึ้นทุกวินาที
   • Cleanup Function: ส่วน return ที่เป็นฟังก์ชันข้างใน คือส่วนที่สำคัญมาก! React จะเรียกใช้ฟังก์ชันนี้ตอนที่ component กำลังจะถูกทำลาย (Unmounting) เราจึงสั่ง clearInterval เพื่อหยุดการนับเวลา ถ้าเราไม่ทำขั้นตอนนี้ แม้ component จะหายไปแล้ว แต่ timer จะยังคงทำงานอยู่ข้างหลัง ทำให้เกิด memory leak ได้ครับ

2. useEffect ตัวที่สอง (สำหรับ Updating):

   • การทำงาน: useEffect ตัวนี้จะคอยดักฟังการเปลี่ยนแปลงของ seconds ที่เราใส่ไว้ใน dependency array [seconds]
   • เราทำอะไร?: ทุกครั้งที่ state ของ seconds เปลี่ยนไป (Updating) โค้ดในนี้ก็จะทำงาน ซึ่งในที่นี้เราแค่ console.log เวลาที่อัปเดตออกมาให้ดู

สรุปง่าย ๆ

การเข้าใจ Lifecycle ช่วยให้เรารู้ว่าควรจะเขียนโค้ดสำหรับจัดการ Side Effects ต่าง ๆ ไว้ที่ไหนและเมื่อไหร่

• อยากทำอะไรบางอย่าง ครั้งแรก ตอน component โหลด? ➡️ ใส่ใน useEffect ที่มี []
• อยากทำอะไรบางอย่าง เมื่อ state หรือ props เปลี่ยน? ➡️ ใส่ใน useEffect พร้อมกับระบุ state/props นั้นใน dependency array
• อยาก เก็บกวาด ก่อน component หายไป? ➡️ ใส่โค้ด cleanup ไว้ใน return ของ useEffect

💡 เกร็ดความรู้เพิ่มเติม: แล้วการ Fetch ข้อมูลล่ะ?

ทุกคน อาจจะเคยเห็นตัวอย่างการ fetch ข้อมูล (เช่น fetch('api/...')) ใน useEffect บ่อย ๆ ซึ่งก็สามารถทำได้นะครับ! แต่ในโปรเจกต์จริง ๆ การทำแบบนี้อาจจะจัดการยากนิดหน่อย เพราะเราต้องมาเขียนโค้ดจัดการ state ตอนโหลด (loading), ตอน error, และการยกเลิก request เองทั้งหมด

ในปัจจุบันเลยมีเครื่องมือเจ๋ง ๆ อย่าง SWR หรือ TanStack Query (React Query) ที่ถูกสร้างมาเพื่อจัดการเรื่องนี้โดยเฉพาะ ทำให้โค้ดเราสั้นลงและจัดการง่ายขึ้นมากครับ พวกมันจัดการเรื่อง caching, loading/error states, และการ re-fetch ให้อัตโนมัติเลย

ดังนั้น แม้ useEffect จะใช้ fetch ข้อมูลได้ (และเป็นตัวอย่างที่ดีในการเรียนรู้) แต่ถ้าจะใช้งานจริงจัง ลองศึกษาเครื่องมือเหล่านี้ดูนะครับ ชีวิตจะดีขึ้นเยอะเลย! 😎

หวังว่าทุกคน จะเข้าใจเรื่อง React Lifecycle มากขึ้นนะครับ มันเป็นพื้นฐานที่สำคัญมาก ๆ ที่จะช่วยให้เราเขียนโค้ด React ได้ดีและมีประสิทธิภาพขึ้นเยอะเลย