React Hooks คืออะไร? สรุปพื้นฐานสำคัญที่นักพัฒนาต้องรู้ใน 10 นาที

React Hooks คืออะไร และทำไมต้องรู้จัก

หากคุณเคยเขียนโปรแกรมด้วย React ในสมัยก่อน คุณอาจจะเคยได้ยินคำว่า Class Component ซึ่งเป็นวิธีเขียนที่ค่อนข้างซับซ้อนและมีโค้ดที่ยาวเหยียด ต่อมาทีมงาน React จึงได้แนะนำ React Hooks เข้ามา เพื่อให้เราสามารถเขียนฟังก์ชันธรรมดาให้มีความสามารถในการ "จำสถานะ" และ "ตอบสนองต่อเหตุการณ์" ได้เหมือนกับเครื่องจักรที่มีหน่วยความจำ

เปรียบเทียบง่ายๆ เหมือนการทำอาหาร Class Component เหมือนการที่คุณต้องเตรียมอุปกรณ์ทุกอย่างไว้บนโต๊ะตามกฎเกณฑ์ที่เข้มงวด แต่ React Hooks เหมือนการมี "กล่องเครื่องมืออัจฉริยะ" ที่คุณสามารถหยิบมาใช้เมื่อไหร่ก็ได้ตามต้องการ ทำให้โค้ดของคุณสะอาด อ่านง่าย และนำกลับมาใช้ซ้ำได้สะดวกกว่าเดิมมากครับ

ทำไมต้องเรียนรู้เรื่องนี้? เพราะปัจจุบันการเขียน React แบบทันสมัยนิยมใช้ Hooks เป็นมาตรฐานหลัก หากคุณต้องการทำงานในสายงานพัฒนาเว็บสมัยใหม่ การเข้าใจ Hooks คือทักษะพื้นฐานที่ขาดไม่ได้เลยครับ

หัวใจหลัก: useState และ useEffect

ตัวแรกที่คุณต้องรู้จักคือ useState ซึ่งใช้สำหรับเก็บ "ข้อมูลที่เปลี่ยนแปลงได้" ในหน้าจอ เช่น จำนวนสินค้าในตะกร้า หรือชื่อผู้ใช้งานที่พิมพ์ลงในช่องกรอกข้อมูล ถ้าไม่มี useState หน้าจอของคุณจะไม่ยอมอัปเดตค่าใหม่ให้เห็นแม้ข้อมูลหลังบ้านจะเปลี่ยนไปแล้วก็ตาม

ตัวถัดมาคือ useEffect ซึ่งเปรียบเสมือน "ผู้ช่วยส่วนตัว" ที่คอยทำงานหลังจากที่หน้าจอแสดงผลเสร็จแล้ว เช่น การดึงข้อมูลจากฐานข้อมูลมาแสดง หรือการเปลี่ยนชื่อหน้าเว็บ (Document Title) โดยมันจะคอยเฝ้าดูว่าข้อมูลตัวไหนเปลี่ยนไปบ้าง ถ้าเปลี่ยนแล้วค่อยให้มันทำงานตามคำสั่งที่เราวางไว้

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

function Counter() {
  // useState: ประกาศตัวแปร count เริ่มต้นที่ 0
  const [count, setCount] = useState(0);

  // useEffect: ทำงานทุกครั้งที่ count เปลี่ยนแปลง
  useEffect(() => {
    document.title = `คุณคลิกไปแล้ว ${count} ครั้ง`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      คลิกตอนนี้: {count}
    </button>
  );
}

ในโค้ดด้านบน useState(0) คือการบอก React ว่าให้จำค่าเริ่มต้นไว้ที่ 0 ส่วน setCount คือฟังก์ชันที่จะเปลี่ยนค่า count ให้เป็นค่าใหม่ และ useEffect จะทำงานอัตโนมัติ ทันทีที่คุณคลิกปุ่มเพื่อเปลี่ยนตัวเลขบนหน้าจอครับ

การเพิ่มประสิทธิภาพด้วย useCallback

เมื่อโปรแกรมของคุณเริ่มใหญ่ขึ้น ปัญหาที่มือใหม่มักเจอคือ "การประมวลผลซ้ำซ้อน" ทำให้เว็บช้าลง useCallback จึงถูกสร้างมาเพื่อแก้ปัญหานี้ โดยมันจะทำหน้าที่ "จำฟังก์ชัน" เอาไว้ ไม่ให้สร้างใหม่ทุกครั้งที่หน้าจอมีการขยับเขยื้อน ซึ่งช่วยประหยัดทรัพยากรเครื่องได้มาก

ลองจินตนาการว่าคุณมีสูตรทำอาหารที่ซับซ้อนมาก ถ้าคุณต้องเขียนสูตรใหม่ทุกครั้งที่ลูกค้าสั่งอาหารหนึ่งจาน มันคงเสียเวลาและเปลืองกระดาษ useCallback ก็เหมือนการเก็บสูตรนั้นไว้ในแฟ้ม เมื่อมีลูกค้าสั่งซ้ำ คุณแค่หยิบแฟ้มเดิมออกมาใช้ ไม่ต้องเขียนใหม่ตั้งแต่ต้นครับ

import React, { useCallback } from 'react';

// useCallback ช่วยป้องกันการสร้างฟังก์ชันใหม่โดยไม่จำเป็น
const handleClick = useCallback(() => {
  console.log("บันทึกข้อมูลเรียบร้อย!");
}, []); // อาร์เรย์ว่างหมายความว่าให้จำฟังก์ชันนี้ไว้ตลอดไป

ข้อควรระวัง: อย่าใช้ useCallback กับทุกฟังก์ชันนะครับ เพราะการที่ React ต้องคอย "จำ" อะไรบางอย่างก็ใช้ทรัพยากรเช่นกัน ให้ใช้เฉพาะกับฟังก์ชันที่ส่งต่อไปยังส่วนประกอบย่อยๆ ที่มีการคำนวณหนักๆ เท่านั้นครับ

Custom Hooks: สร้างเครื่องมือใช้เอง

หากคุณพบว่าตัวเองต้องเขียนโค้ดชุดเดิมซ้ำๆ ในหลายหน้า นี่คือเวลาของ Custom Hooks ครับ มันคือการนำ useState หรือ useEffect หลายๆ ตัวมารวมกันเป็นฟังก์ชันเดียว เพื่อให้คุณสามารถเรียกใช้งานฟังก์ชันนั้นได้ทุกที่ในโปรเจกต์

ตัวอย่างเช่น หากคุณต้องดึงข้อมูลจาก API (ช่องทางที่โปรแกรมใช้คุยกับฐานข้อมูล) ในทุกหน้าจอ แทนที่จะเขียนโค้ดดึงข้อมูลซ้ำไปซ้ำมา คุณก็แค่สร้าง useFetchData ขึ้นมาตัวเดียว แล้วเรียกใช้ในหน้าไหนก็ได้ที่ต้องการข้อมูลนั้น

1. สร้างฟังก์ชันที่ขึ้นต้นด้วยคำว่า use เสมอ (เช่น useAuth)
2. ย้ายโค้ด Logic หรือการทำงานที่คุณใช้บ่อยๆ เข้าไปใส่ในนั้น
3. เรียกใช้ฟังก์ชัน useAuth() ใน Component อื่นๆ ได้ทันที

ผลลัพธ์ที่ได้คือโค้ดที่สั้นลงอย่างเห็นได้ชัด และหากวันหนึ่งคุณต้องการแก้ไขวิธีดึงข้อมูล คุณก็แค่แก้ที่ useFetchData จุดเดียว ทุกหน้าที่เรียกใช้ก็จะอัปเดตตามไปทั้งหมดทันทีครับ

สรุป: เริ่มต้นใช้งานจริง

การเรียนรู้ React Hooks ไม่ใช่แค่เรื่องของการจำชื่อฟังก์ชัน แต่คือการปรับวิธีคิดให้มองการทำงานของเว็บเป็นลำดับขั้นตอน การใช้ useState เพื่อเก็บข้อมูล, useEffect เพื่อจัดการเหตุการณ์, และ useCallback เพื่อเพิ่มความเร็ว จะช่วยให้แอปพลิเคชันของคุณมีประสิทธิภาพสูงขึ้น

ตัวอย่างการนำไปใช้จริง: หากคุณกำลังสร้าง แอปพลิเคชันรายการสิ่งที่ต้องทำ (To-Do List) คุณสามารถใช้ useState เก็บรายชื่อรายการทั้งหมด, ใช้ useEffect เพื่อบันทึกรายการลงในหน่วยความจำของเบราว์เซอร์ (LocalStorage) อัตโนมัติทุกครั้งที่มีการเพิ่มรายการใหม่ และสร้าง Custom Hook สำหรับจัดการการเชื่อมต่อกับฐานข้อมูลครับ

หัวใจสำคัญคือการฝึกฝน ลองพิมพ์โค้ดตัวอย่างข้างต้นด้วยตัวเอง อย่าเพียงแค่อ่านผ่านๆ เพราะความเข้าใจที่แท้จริงเกิดจากการลองผิดลองถูก หากติดปัญหาตรงไหนหรือมีคำถามเพิ่มเติม สามารถทิ้งคอมเมนต์ไว้ด้านล่างได้เลยครับ ผมยินดีตอบทุกคำถามเพื่อให้ทุกคนก้าวสู่การเป็นนักพัฒนา React ที่เก่งขึ้นครับ