วิธีเขียน React 19 Custom Hooks เพื่อจัดการโค้ดซ้ำให้สะอาดและดูแลรักษาง่าย

Custom Hooks คืออะไรและทำไมเราต้องใช้มัน

เวลาเราเขียนโปรแกรมด้วย React เรามักจะเจอกับตรรกะหรือการทำงานที่ต้องใช้ซ้ำบ่อยๆ เช่น การดึงข้อมูลจากเว็บ หรือการเก็บค่าไว้ในเครื่อง ถ้าเราเขียนโค้ดเดิมซ้ำไปมาทุกที่ โค้ดจะอ่านยากและแก้ไขลำบาก Custom Hooks (ฟังก์ชันพิเศษที่สร้างขึ้นเองเพื่อรวมโค้ดที่ใช้ซ้ำ) จึงเข้ามาแก้ปัญหานี้ให้เรา

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

การสร้าง Custom Hook ช่วยให้เราแยก Logic (ตรรกะการทำงานของโปรแกรม) ออกจากหน้าตาของแอปได้ ทำให้เรานำโค้ดไปใช้ในส่วนไหนก็ได้ของโปรเจกต์โดยไม่ต้องเขียนใหม่ นี่คือทักษะสำคัญที่โปรแกรมเมอร์มือโปรใช้เพื่อเพิ่มความเร็วในการทำงานครับ

โครงสร้างของ Custom Hook ที่มือใหม่ต้องรู้

กฎเหล็กของการสร้าง Custom Hook คือชื่อฟังก์ชันต้องขึ้นต้นด้วยคำว่า use เสมอ เช่น useMyData เพื่อให้ React รู้ว่านี่คือ Hook และช่วยตรวจสอบการใช้งานให้เราโดยอัตโนมัติ

ภายใน Custom Hook เราสามารถเรียกใช้ Built-in Hooks (คำสั่งมาตรฐานที่ React เตรียมมาให้) อย่าง useState หรือ useEffect ได้ตามปกติ เหมือนกับที่เราเขียนใน Component (ส่วนประกอบของหน้าจอ) ทั่วไปเลยครับ

นี่คือตัวอย่างการสร้าง useFetch เพื่อดึงข้อมูลจาก API (ช่องทางเชื่อมต่อข้อมูลระหว่างแอปกับเซิร์ฟเวอร์) แบบง่ายๆ ครับ

import { useState, useEffect } from 'react';

// สร้างฟังก์ชันชื่อขึ้นต้นด้วย use
function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url]);

  // ส่งค่าที่ต้องการใช้งานกลับไป
  return data;
}

โค้ดด้านบนคือการสร้าง Hook สำหรับดึงข้อมูล เมื่อเราเรียกใช้ useFetch('url-ที่ต้องการ') ฟังก์ชันนี้จะจัดการเรื่องการดึงข้อมูลและเก็บค่าไว้ให้เราทันที ทำให้หน้าจอหลักของเราสั้นและอ่านง่ายขึ้นมากครับ

ตัวอย่างการใช้งานในสถานการณ์จริง

ลองดูเปรียบเทียบระหว่างแบบเดิมที่เขียนโค้ดซ้ำ กับแบบที่ใช้ Custom Hook ครับ แบบเดิมเราอาจต้องเขียน useEffect ยาวๆ ในทุกหน้าจอที่ต้องการดึงข้อมูล ซึ่งถ้าวันหนึ่ง API เปลี่ยนแปลง เราต้องตามแก้ทุกจุดที่เขียนไว้

เมื่อใช้ Custom Hook เราแค่แก้ไขโค้ดในไฟล์ useFetch.js เพียงจุดเดียว โปรแกรมทุกส่วนที่เรียกใช้ Hook นี้ก็จะอัปเดตตามอัตโนมัติ นี่คือวิธีเพิ่มประสิทธิภาพการทำงานที่ช่วยลด Bug (ข้อผิดพลาดของโปรแกรม) ได้ดีที่สุด

ลองดูวิธีการเรียกใช้งานจริงในหน้าจอของเราครับ:

function UserProfile() {
  // เรียกใช้ Custom Hook เหมือนเรียกฟังก์ชันทั่วไป
  const user = useFetch('https://api.example.com/user');

  if (!user) return <p>กำลังโหลด...</p>;
  return <h1>{user.name}</h1>;
}

จะเห็นว่า Component ของเราสะอาดขึ้นมาก เราไม่ต้องสนใจขั้นตอนการดึงข้อมูลที่ยุ่งยากอีกต่อไป แค่เรียกใช้ Hook แล้วเอาค่าที่ได้ไปแสดงผลได้เลยครับ

ข้อควรระวังและจุดที่มือใหม่มักพลาด

จุดที่ต้องระวังที่สุดคือ Hook Rules (กฎการใช้ Hook) คือห้ามเรียกใช้ Hook ภายในเงื่อนไข if หรือในลูป for เพราะ React ต้องการให้ลำดับการเรียก Hook เหมือนเดิมในทุกครั้งที่หน้าจอถูกวาดใหม่

อีกเรื่องคือการส่งค่า Dependency (ค่าที่ถ้าเปลี่ยนแล้วจะให้รันคำสั่งใหม่) ใน useEffect หากเราลืมใส่ค่าที่ต้องติดตามลงไปในอาร์เรย์ด้านหลัง useEffect จะทำให้โปรแกรมทำงานผิดพลาดหรือดึงข้อมูลซ้ำไม่หยุด

คำแนะนำคือให้ใช้เครื่องมือช่วยอย่าง ESLint (โปรแกรมช่วยตรวจจับโค้ดที่อาจมีปัญหา) ที่มาพร้อมกับโปรเจกต์ React มันจะคอยเตือนเราทันทีถ้าเราเขียน Hook ผิดกฎ หรือลืมใส่ค่า Dependency ที่จำเป็นครับ

สรุป: การนำ Custom Hooks ไปใช้งานจริง

การฝึกเขียน Custom Hook ไม่ใช่แค่เรื่องของการลดโค้ดซ้ำ แต่มันคือการฝึกคิดแบบ Modular (การแยกส่วนประกอบที่ทำงานอิสระต่อกัน) ซึ่งเป็นทักษะสำคัญในการทำงานร่วมกับทีมโปรแกรมเมอร์มืออาชีพ

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

จำไว้ว่าโปรแกรมเมอร์ที่เก่งไม่ได้วัดกันที่เขียนโค้ดได้เยอะแค่ไหน แต่วัดกันที่การเขียนโค้ดให้ Maintainable (ดูแลรักษาและต่อยอดได้ง่ายในระยะยาว) แค่ไหน เริ่มฝึกตั้งแต่วันนี้แล้วคุณจะเก่งขึ้นแน่นอนครับ