custom hooks — เอา logic ที่ใช้ซ้ำออกมาเป็นของตัวเอง

next                16.3.4      # จาก npx next --version
react / react-dom   19.2.8      # จาก package.json ของโปรเจกต์จริง
node                v24.14.0    # จาก node --version
eslint 9 + eslint-config-next 16.3.4

ปัญหาที่ทำให้ custom hook เกิดขึ้น

สมมติหน้าเว็บคุณมีสองที่ที่ต้องนับเลข — กล่องซ้ายกับกล่องขวา
ถ้ายังไม่รู้จัก custom hook คุณจะเขียนแบบนี้ คือก็อป useState กับฟังก์ชัน inc ไปวางซ้ำ

function BoxA() {
  const [count, setCount] = useState(0);
  const inc = () => setCount((c) => c + 1);
  // …JSX…
}

function BoxB() {
  const [count, setCount] = useState(0);
  const inc = () => setCount((c) => c + 1);
  // …JSX…
}

// components/t77/useCounter.ts
import { useState } from "react";

export function useCounter(start = 0) {
  const [count, setCount] = useState(start);
  const inc = () => setCount((c) => c + 1);
  return { count, inc };
}

// ใช้:
const { count, inc } = useCounter(0);

นี่คือทั้งหมดที่สไลด์หน้า 61 พูด: "Enables to extract and reuse stateful component logic across multiple parts of application"
คำสำคัญคือ stateful — ถ้า logic ที่จะดึงออกมาไม่ได้ยุ่งกับ state หรือ side effect เลย มันคือฟังก์ชันธรรมดา ไม่ใช่ hook (เดี๋ยวจะเห็นว่าเรื่องนี้สำคัญกว่าที่คิด ในกฎข้อ 2)

กฎ 4 ข้อ ตามสไลด์หน้า 62

สไลด์หน้า 62 ขึ้นหัวว่า Core Rules แล้วให้มา 4 บรรทัด · ผมแปลไว้ในตารางนี้ พร้อมช่อง "ใครเป็นคนจับได้" ซึ่งสไลด์ไม่ได้บอก แต่เป็นช่องที่ทำให้คุณ debug เป็น

กฎ 1 · ชื่อต้องขึ้นต้นด้วย use — เพราะเครื่องมืออ่านแค่ชื่อ

คำถามที่ควรถามคือ "ถ้าไม่ตั้งชื่อว่า use แล้วมันพังตรงไหน?"
ผมเขียนฟังก์ชันเดียวกันเป๊ะ ๆ แต่ตั้งชื่อว่า getCounter แล้วรัน eslint ดู

// components/t77/getCounter.ts — เหมือน useCounter ทุกอย่าง ต่างแค่ชื่อ
import { useState } from "react";

export function getCounter(start: number = 0) {
  const [count, setCount] = useState(start);
  const inc = () => setCount((c) => c + 1);
  return { count, inc };
}

$ npx eslint components/t77/getCounter.ts

components/t77/getCounter.ts
  5:29  error  React Hook "useState" is called in function "getCounter" that is
               neither a React function component nor a custom React Hook function.
               React component names must start with an uppercase letter.
               React Hook names must start with the word "use"
               react-hooks/rules-of-hooks

✖ 1 problem (1 error, 0 warnings)

แล้วถ้าดื้อ ไม่เปลี่ยนชื่อ ปล่อยให้ eslint แดงไว้แบบนั้นล่ะ?
โค้ดยังรันได้ปกติ — ผมกดใช้จริงในเบราว์เซอร์แล้ว มันนับเลขได้ไม่มีปัญหา React ตอนรันไม่เคยดูชื่อฟังก์ชันคุณเลย

กฎ 2 · ต้องเรียก hook ของ React อย่างน้อยหนึ่งตัว

กฎข้อนี้อ่านแล้วงงที่สุด เพราะฟังดูเหมือนข้อบังคับที่ไม่มีเหตุผล
ผมเลยลองแหกดู: เขียนฟังก์ชันชื่อ useFormatBaht ที่ไม่ได้เรียก hook อะไรเลย แล้วเอาไปเรียกใน if

// components/t77/useFormatBaht.ts — ชื่อขึ้นต้นด้วย use แต่ข้างในไม่มี hook เลย
export function useFormatBaht(n: number) {
  return n.toLocaleString("th-TH") + " บาท";
}

// app/t77/rule2/page.tsx (ตัดมาเฉพาะส่วนสำคัญ · ไฟล์เต็มมี "use client" กับ useState อยู่ข้างบน)
if (show) {
  console.log(useFormatBaht(1200));   // เรียกใน if
}

โค้ดนี้รันได้ปกติ — มันเป็นฟังก์ชันคำนวณธรรมดา ไม่มี state ให้เรียงลำดับ React ไม่เดือดร้อนอะไร แต่ eslint บอกว่า:

app/t77/rule2/page.tsx
  11:17  error  React Hook "useFormatBaht" is called conditionally. React Hooks must be
                called in the exact same order in every component render
                react-hooks/rules-of-hooks

✖ 1 problem (1 error, 0 warnings)

นี่คือ error ปลอม · โค้ดไม่ได้ผิดเลย แต่ eslint ตัดสินจากชื่ออย่างเดียว (กฎข้อ 1) พอเห็น use ก็สรุปทันทีว่าเป็น hook แล้วบังคับกฎ top-level ใส่

กฎ 3 · เรียกที่ระดับบนสุดเท่านั้น — ข้อนี้ React ฟ้องเอง

ทีนี้ลองของจริง: เอา useCounter (ซึ่งมี useState อยู่ข้างในจริง ๆ) ไปเรียกใน if

// app/t77/rule3/page.tsx
"use client";

import { useState } from "react";
import { useCounter } from "@/components/t77/useCounter";

export default function Page() {
  const [show, setShow] = useState(false);

  if (show) {
    const { count } = useCounter(0);   // ❌ hook ใน if
    console.log(count);
  }

  return (
    <main>
      <button onClick={() => setShow(true)}>show</button>
    </main>
  );
}

React has detected a change in the order of Hooks called by Page. This will lead to
bugs and errors if not fixed. For more information, read the Rules of Hooks:
https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Error: Rendered more hooks than during the previous render.

eslint ก็จับได้ตั้งแต่ก่อนรัน — ข้อความคนละอันกับกฎข้อ 1 นะ อ่านให้ออกว่าอันไหนคืออันไหน

app/t77/rule3/page.tsx
  11:23  error  React Hook "useCounter" is called conditionally. React Hooks must be
                called in the exact same order in every component render
                react-hooks/rules-of-hooks

กับดัก: ถ้าตั้งชื่อผิดกฎข้อ 1 eslint จะเฝ้ากฎข้อ 3 ให้ไม่ได้

ผมเอาโค้ดชุดเดิมเป๊ะ ๆ แต่เปลี่ยนไปเรียก getCounter (ชื่อไม่ขึ้นต้นด้วย use) ใน if แทน

ทั้งสองแบบพังเหมือนกันตอนรัน — ต่างกันแค่แบบซ้ายพังตั้งแต่ตอนตรวจ แบบขวาพังตอนผู้ใช้กดปุ่ม
นี่คือคำตอบว่าทำไมกฎข้อ 1 (ตั้งชื่อ use) ถึงต้องมาก่อนกฎข้อ 3

$ npx next lint
Invalid project directory provided, no such directory: /…/next-sandbox/lint

กฎ 4 · เรียกสองที่ = ได้ state คนละก้อน (ข้อที่เข้าใจผิดกันมากที่สุด)

มาถึงข้อที่สำคัญที่สุดของบทนี้
คำถามที่เกือบทุกคนตอบผิดครั้งแรกคือ: "กระดาษสูตรมีแผ่นเดียว แล้วตัวเลขล่ะ มีก้อนเดียวไหม?"
ผมเลยทำหน้าจริงขึ้นมา — Box ตัวเดียว เรียก useCounter(0) ข้างใน แล้วเอาไปวางสองครั้ง

// app/t77/page.tsx
"use client";

import { useCounter } from "@/components/t77/useCounter";

function Box({ label }: { label: string }) {
  const { count, inc } = useCounter(0);
  return (
    <p>
      <span>{label}</span> = <b>{count}</b>{" "}
      <button onClick={inc}>+1</button>
    </p>
  );
}

export default function Page() {
  return (
    <main>
      <Box label="A" />
      <Box label="B" />
    </main>
  );
}

เปิดหน้า → กดปุ่ม +1 ของ A สามครั้ง → กดปุ่ม +1 ของ B หนึ่งครั้ง

t77 — useCounter สองที่

A = 3 +1

B = 1 +1

          <Box label="A" />                    <Box label="B" />
      ┌──────────────────────────┐        ┌──────────────────────────┐
      │  useCounter(0)           │        │  useCounter(0)           │
      │    └─ useState  →  [ 3 ] │        │    └─ useState  →  [ 1 ] │
      └──────────────────────────┘        └──────────────────────────┘
                   ▲                                   ▲
                   └───────────┬───────────────────────┘
                               │
              โค้ดใช้ร่วมกัน (ไฟล์ useCounter.ts มีแผ่นเดียว)
              แต่ช่องเก็บค่าแยกกัน

   React ผูก state ไว้กับ "ตำแหน่งของ component ในต้นไม้"
   ไม่ได้ผูกไว้กับ "ฟังก์ชัน useCounter"
   → วาง Box กี่ตัว ก็ได้ช่องเก็บค่าเท่านั้นตัว

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

เขียน custom hook ที่ใช้ได้จริงหนึ่งตัว — useDebounce

สไลด์หน้า 61 ยกตัวอย่างการใช้งานมา 9 แบบ · อันที่ 6 คือ Debounce / Throttle พร้อมโค้ดบรรทัดเดียวว่า const debouncedValue = useDebounce(value, 500);
เราจะเขียนตัวนี้กันจริง ๆ เพราะบท 78 (โจทย์ Customer Search) ต้องใช้พอดี

ปัญหาที่มันแก้: ช่องค้นหา ถ้ายิง API ทุกตัวอักษรที่พิมพ์ พิมพ์ 5 ตัวก็ยิง 5 ครั้ง
สิ่งที่เราอยากได้คือ "รอให้เขาหยุดพิมพ์ก่อนสักครึ่งวินาที ค่อยยิงครั้งเดียว"

// components/t77/useDebounce.ts
import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);   // ← บรรทัดนี้คือทั้งหมดของ debounce
  }, [value, delay]);

  return debounced;
}

กลไกอยู่ที่บรรทัด clearTimeout · ทุกครั้งที่ value เปลี่ยน React จะเรียก cleanup ของรอบก่อนทิ้งก่อน แล้วค่อยรัน effect รอบใหม่
แปลว่า timer ที่ตั้งไว้เมื่อกี๊โดนยกเลิกเสมอ — จะมี timer รอดชีวิตได้ก็ต่อเมื่อ 500ms ผ่านไปโดยไม่มีใครพิมพ์อะไรเพิ่ม

ผมเอาไปใช้จริงในหน้าเทส แล้วใส่ console.log ไว้สองจุดเพื่อนับ:

// app/t77/debounce/page.tsx (ตัดมาเฉพาะส่วนสำคัญ)
const [text, setText] = useState("");
const debounced = useDebounce(text, 500);

useEffect(() => {
  if (text === "") return;
  console.log("RAW:", text);        // นับทุกตัวอักษรที่พิมพ์
}, [text]);

useEffect(() => {
  if (debounced === "") return;
  console.log("SEARCH:", debounced);  // นับ "ครั้งที่จะยิง API จริง"
}, [debounced]);

พิมพ์คำว่า  s → o → l → a → r  รวดเดียว (5 ปุ่ม)
แล้วรอ 2 วินาที แล้วเปิด console ดู

RAW: s
RAW: so
RAW: sol
RAW: sola
RAW: solar
SEARCH: solar

const user = useUser();
return <p>{user?.name}</p>;

// $ npx tsc --noEmit
// app/t77/slide/page.tsx(7,20): error TS2339:
//   Property 'name' does not exist on type 'never'.

ไม่ต้องเขียนเองทุกตัว — useHooks กับ Mantine

สไลด์หน้า 63–64 ปิดท้ายด้วยของสำเร็จรูปสองเจ้า ซึ่งเป็นสองเจ้าที่คนใช้กันจริงในงาน

import { useCallback, useState } from "react";

export function useToggle(initial = false) {
  const [isOpen, setIsOpen] = useState(initial);
  const open   = useCallback(() => setIsOpen(true), []);
  const close  = useCallback(() => setIsOpen(false), []);
  const toggle = useCallback(() => setIsOpen((v) => !v), []);
  return { isOpen, open, close, toggle };
}

ทบทวนด้วยคำถาม

อ่านต่อตรงไหน

• React Docs — Reusing Logic with Custom Hooks — อ่านหัวข้อ Custom Hooks share stateful logic, not state itself ซึ่งเป็นหัวข้อที่ตอบกฎข้อ 4 โดยตรง · ในนั้นมีประโยคที่เขาเน้นไว้ว่า hook แต่ละครั้งที่เรียกเป็นอิสระต่อกันโดยสิ้นเชิง — เทียบกับผลรัน A = 3 · B = 1 ในบทนี้ว่าตรงกันไหม
• React Docs — Rules of Hooks — อ่านหัวข้อ Only call Hooks at the top level ที่ไล่รายการไว้ครบว่าห้ามเรียกใน if · loop · try/catch · หลัง return · และในฟังก์ชันที่ไม่ใช่ component (ลิงก์นี้คือลิงก์เดียวกับที่ React พิมพ์ใน error ตอนหน้าพัง)
• React Docs — useEffect — อ่านหัวข้อ Parameters ตรงคำอธิบายของ cleanup function ที่บอกว่า React เรียก cleanup ของรอบก่อนก่อนรัน effect รอบใหม่เสมอ — ประโยคนั้นคือคำอธิบายว่าทำไม useDebounce 10 บรรทัดถึงทำงานได้
• useHooks (ui.dev) — เปิดหน้า useDebounce ของเขา แล้วเทียบกับตัวที่เราเขียนในบทนี้บรรทัดต่อบรรทัด ดูว่าเขาเพิ่มอะไรมาบ้าง และคุณต้องการมันไหม
• Mantine Hooks — ไล่รายชื่อในแถบซ้ายสัก 1 นาที (use-click-outside, use-hotkeys, use-media-query, use-local-storage) เพื่อให้รู้ว่ามีอะไรให้หยิบบ้าง จะได้ไม่เขียนของที่มีคนเขียนไว้ดีแล้ว