React Hooks พื้นฐาน
ปลูกฝังสมองและความจำให้ UI!

ในยุคก่อนหน้านี้ การทำให้ Component จดจำข้อมูลบางอย่างได้ เราต้องเขียนโค้ดด้วยรูปแบบ Class Component ที่เข้าใจยากและยุ่งเหยิงมาก แต่ใน React ยุคใหม่ เราเขียน Component ด้วย JavaScript Function ธรรมดาๆ แทน เพื่อความคล่องตัวและกระชับของโค้ด

ทว่า... ในโลกของโปรแกรมมิ่ง JavaScript ฟังก์ชันทั่วไปมีคุณสมบัติหนึ่งที่เป็นอุปสรรคต่อการทำ UI นั่นคือ **"ความจำเสื่อมชั่วคราว (Statelessness)"** เมื่อฟังก์ชันทำงานบรรทัดสุดท้ายเสร็จและ return หน้าจอ HTML ออกมาแล้ว **ตัวแปรภายในทั้งหมดจะสลายหายไปจากหน่วยความจำทันที!** และเมื่อมีการเรนเดอร์ใหม่ มันก็จะเริ่มต้นนับหนึ่งใหม่เสมอ

📊 ตารางเปรียบเทียบ: ตัวแปรปกติ vs ตัวแปรสถานะของ React (State)

นี่จึงเป็นเหตุผลที่ React สร้าง **Hooks (เบ็ดเกี่ยว)** ขึ้นมา! มันคือกลุ่มฟังก์ชันพิเศษที่ขึ้นต้นด้วยคำว่า use(เช่น useState, useEffect) ซึ่งออกแบบมาเพื่อให้เราสามารถ **"โยนเบ็ดไปเกี่ยวเบื้องหลังการทำงานหลักของ React Engine"** เพื่อหยิบยืมพลังพิเศษ เช่น ระบบความทรงจำระยะยาว (State) และระบบความเคลื่อนไหว (Lifecycle) มาสวมใส่ให้กับฟังก์ชันธรรมดาของเราได้อย่างสมบูรณ์แบบและทรงพลัง! 🚀

เบ็ดตัวแรกและเป็นตัวที่เราหยิบมาใช้บ่อยที่สุดก็คือ useState หน้าที่ของมันคือ "สร้างกล่องเก็บสถานะในสมองของ Component"

ไวยากรณ์ในการเขียนแสนเรียบง่าย แต่มีเอกลักษณ์ดังนี้:

ตัวอย่างการประกาศ useState
import { useState } from "react";

function Counter() {
  // 1. ประกาศตัวแปรจดจำสถานะชื่อ count และฟังก์ชันอัปเดตชื่อ setCount
  const [count, setCount] = useState(0); // เริ่มต้นด้วยเลข 0

  return (
    <div>
      <p>คุณกดคลิกไปแล้ว {count} ครั้ง</p>
      
      {/* 2. สั่งเปลี่ยนค่าผ่าน setCount เพื่อบอก React ให้วาดหน้าจอใหม่ */}
      <button onClick={() => setCount(count + 1)}>
        เพิ่มแต้ม
      </button>
    </div>
  );
}

💡 สังเกตการตั้งชื่อ: เรานิยมใช้โครงสร้าง [name, setName] เสมอ เช่น [isOn, setIsOn] หรือ [user, setUser] เพื่อความเข้าใจที่ชัดเจนตรงกันทั้งโลก

เมื่อ Component ของเรามีสมองเอาไว้จำสิ่งต่างๆ แล้ว (ด้วย useState) บางทีเราอาจจะอยากให้เกิด "ผลลัพธ์ข้างเคียง (Side Effects)" นอกเหนือจากการแสดงผล HTML ปกติ เช่น:

• "เมื่อหลอดไฟเปิด ให้บันทึกประวัติเหตุการณ์เก็บไว้ในตาราง"
• "เมื่อเริ่มเปิดหน้าเว็บครั้งแรกสุด ให้ไปดึงข้อมูลราคาน้ำมันจาก API"
• "เมื่อค่าพลังงานเปลี่ยน ให้แก้ไขหัวข้อบนแท็บเว็บบนสุด (Document Title)"

งานเหล่านี้เราจะทำผ่านเบ็ดตัวที่สองคือ useEffect ซึ่งมีไวยากรณ์ในการเขียนดังนี้:

โครงสร้าง useEffect
useEffect(() => {
  // 📸 โค้ดส่วนที่จะให้ทำงาน (Side Effect)
  console.log("พลังงานอัปเดตเป็น: " + power);

  return () => {
    // 🧹 (ตัวเลือกพิเศษ) ล้างข้อมูลส่วนเกิน (Cleanup Function)
  };
}, [power]); // 👁️ อาร์เรย์เฝ้าระวังตัวแปร (Dependency Array)

หัวใจที่ทำให้หลายคนงุนงงกับ useEffect มากที่สุดคือกล่องเหลี่ยมๆ ข้างหลังที่เรียกว่า Dependency Array (ชุดพารามิเตอร์เฝ้าระวัง)ซึ่งมีรูปแบบการส่งค่าเข้าไปอยู่ 3 แบบหลักๆ และให้ผลลัพธ์ต่างกันราวฟ้ากับเหว:

💡 คำแนะนำ: ลองสลับไปเล่นที่สนามเด็กเล่นด้านบนในแถบ 2. useEffect ดูอีกครั้ง ลองเลือกติ๊กถูก/ติ๊กออกในกล่อง "เฝ้า [power]" หรือ "เฝ้า [isOn]" แล้วทดลองเปลี่ยนค่าด้านซ้ายดู จะช่วยให้มองเห็นความสัมพันธ์ของ Dependency Array ได้ชัดเจนยิ่งขึ้น!

เพื่อรักษาความมั่นคงและความถูกต้องในความทรงจำของ React เขาจึงตั้งกฎเหล็กไว้ 2 ข้อที่ห้ามโปรแกรมเมอร์ละเมิดเด็ดขาด: