useState — ทำให้หน้าเว็บจำค่าได้และวาดใหม่เอง

next        16.3.4   # Turbopack (ตัว build ปริยายของ Next 16)
react       19.2.8
react-dom   19.2.8
typescript  5
node        v24.14.0

1 · ปัญหาก่อน: หน้าเว็บที่กดแล้วไม่มีอะไรเกิดขึ้น

ลองคิดถึงของที่ง่ายที่สุดในโลก — ปุ่มนับเลข กดทีนึงเลขเพิ่มทีนึง
ถ้าคุณเพิ่งเขียน Go มา 9 วัน สมองจะสั่งให้เขียนแบบนี้ทันที: ประกาศตัวแปร แล้วบวกมันตอนกด

// components/PlainVar.tsx
'use client';

export default function PlainVar() {
  let count = 0;

  return (
    <button
      onClick={() => {
        count = count + 1;
        console.log('[PlainVar] count in memory =', count);
      }}
    >
      Plain: {count}
    </button>
  );
}

// กดปุ่มนี้ 3 ครั้งติดกัน
// 1) ตัวเลขบนหน้าจอจะเป็นเท่าไหร่?
// 2) แล้วใน console จะพิมพ์อะไรออกมา?

start          -> Plain: 0
plain click 1  -> Plain: 0
plain click 2  -> Plain: 0
plain click 3  -> Plain: 0

[log] [PlainVar] count in memory = 1
[log] [PlainVar] count in memory = 2
[log] [PlainVar] count in memory = 3

สรุปว่าเราต้องการของที่ทำสองอย่างพร้อมกัน ซึ่งตัวแปรธรรมดาทำไม่ได้:

1. จำค่าข้ามการวาด — วาดใหม่กี่รอบก็ยังจำได้ว่าตอนนี้เลขคือเท่าไหร่
2. สั่งวาดใหม่ — พอค่าเปลี่ยน ต้องมีใครไปเคาะ React ว่า "เรียกฟังก์ชันนี้ใหม่ที"

ของชิ้นนั้นชื่อ state และประตูเข้าถึงมันชื่อ useState()

2 · ก่อนแตะ useState ต้องรู้จัก 'use client' ก่อน (ไม่งั้น build พัง)

ตรงนี้คือจุดที่คนเรียน Next.js สะดุดกันเกือบทุกคน และสไลด์ไม่ได้พูดถึงเลย
ใน App Router ที่คุณเรียนมาตั้งแต่บท 70 ทุกไฟล์ใต้ app/ ถือเป็น Server Component โดยปริยาย — มันถูกรันบนเซิร์ฟเวอร์ แปลงเป็น HTML แล้วส่งไปให้เบราว์เซอร์
ซึ่งบนเซิร์ฟเวอร์ไม่มีการกดปุ่ม ไม่มี event ไม่มีอะไรให้จำ → hook อย่าง useState จึงเรียกในนั้นไม่ได้

// app/t73/broken/page.tsx  — สังเกตว่า "ไม่มี" บรรทัด 'use client'
import { useState } from 'react';

export default function BrokenCounter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count is {count}
    </button>
  );
}

▲ Next.js 16.3.4 (Turbopack)

  Creating an optimized production build ...

> Build error occurred
Error: Turbopack build failed with 1 error:
./app/t73/broken/page.tsx:1:10
Error: You're importing a module that depends on `useState` into a
React Server Component module. This API is only available in Client
Components. To fix, mark the file (or its parent) with the
`"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
> 1 | import { useState } from 'react';
    |          ^^^^^^^^
  2 |
  3 | export default function BrokenCounter() {
  4 |   const [count, setCount] = useState(0);

วิธีแก้คือเติมบรรทัดเดียวไว้บนสุดของไฟล์ เหนือ import ทุกบรรทัด:

import { useState } from 'react';
'use client';

export default function LateDirective() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Late: {n}</button>;
}

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>State: {count}</button>;
}

ข้อความ error เต็ม ๆ ของฝั่งซ้าย ก็อปมาจริงจาก npx next build:

Error: Turbopack build failed with 2 errors:
./app/t73/late/page.tsx:2:1
Error: The "use client" directive must be placed before other expressions.
Move it to the top of the file to resolve this issue.
  1 | import { useState } from 'react';
> 2 | 'use client';
    | ^^^^^^^^^^^^^
  3 |
  4 | export default function LateDirective() {
  5 |   const [n, setN] = useState(0);

3 · useState() — หน้าตาและวิธีอ่านมัน

สไลด์เขียนไว้บรรทัดเดียว และมันคือทั้งหมดที่ต้องจำ:

const [state, setState] = useState(initialState);

อ่านจากขวาไปซ้าย จะเข้าใจง่ายที่สุด:

วงเล็บก้ามปู [state, setState] ไม่ใช่ไวยากรณ์พิเศษของ React — มันคือ array destructuring ตัวเดียวกับที่คุณใช้ในบท TypeScript
useState คืน array ยาว 2 ช่องเสมอ: ช่อง 0 คือค่า · ช่อง 1 คือฟังก์ชันเซ็ตค่า แล้วเราตั้งชื่อสองช่องนั้นเองในบรรทัดเดียว

// สองบรรทัดนี้ทำงานเหมือนกันเป๊ะ
const [count, setCount] = useState(0);

const pair = useState(0);
const count = pair[0];
const setCount = pair[1];   // แค่ยาวกว่าและไม่มีใครเขียนแบบนี้

อีกเรื่องที่ได้ฟรีเพราะเราเขียน TypeScript: type ของ state ถูกเดาจากค่าตั้งต้น
useState(0) → count เป็น number และ setCount รับได้แค่ number · ลองยัดสตริงเข้าไปแล้วรัน npx tsc --noEmit ได้ผลจริงว่า:

components/t73/TypeSlip.tsx(7,42): error TS2345: Argument of type 'string'
is not assignable to parameter of type 'SetStateAction<number>'.

SetStateAction<number> ในข้อความนั้นแปลว่า "สิ่งที่ setCount รับได้" ซึ่งมีสองแบบ: ตัวเลขตรง ๆ หรือ ฟังก์ชันที่รับเลขเก่าแล้วคืนเลขใหม่ — แบบที่สองคือพระเอกของหัวข้อ 6 จำชื่อนี้ไว้ก่อน

4 · เซ็ตค่าแล้วเกิดอะไรขึ้น — วงจรที่ต้องเห็นในหัว

สไลด์วาดเป็นวงกลม 6 ขั้น หัวใจของมันคือประโยคเดียว: เรียก set function → React เรียกฟังก์ชัน component นั้นใหม่ทั้งตัว → เอาผลไปแปะบนจอ

  คุณกดปุ่ม
      │
      ▼
  setCount(1)                    ← คุณเขียนเอง
      │
      ▼
  React จดไว้ว่า "count รอบหน้า = 1"
      │
      ▼
  React เรียก Counter() ใหม่ทั้งฟังก์ชัน       ← "re-render"
  (คราวนี้ useState(0) คืน count = 1 ให้)
      │
      ▼
  ได้ JSX ก้อนใหม่ → React เทียบกับของเดิม
      │
      ▼
  แก้เฉพาะจุดที่ต่างบนหน้าจอจริง               ← "commit"
      │
      └──► ค่าใหม่กลายเป็นค่าตั้งต้นของรอบถัดไป (วนกลับขึ้นบน)

ประโยคที่สไลด์หน้า useState() เขียนไว้ตรงนี้สำคัญมาก: "When the value updates, React will re-run the function and re-render."
คำว่า re-run the function แปลตรงตัวว่า โค้ดทุกบรรทัดใน component นั้นถูกรันใหม่ รวมถึงบรรทัด useState(0) ด้วย — แต่คราวนี้ React ไม่ได้คืน 0 ให้ มันคืนค่าที่จดไว้

ผมพิสูจน์ด้วยการวาง console.log ไว้นอก event handler แล้วกดปุ่ม 1 ครั้ง:

// ก่อนกด (ตอนหน้าเว็บโหลดเสร็จ)
[log] render with name = Taylor

// หลังกด 1 ครั้ง — ฟังก์ชันถูกเรียกใหม่จริง ๆ
[log] render with name = Robin

5 · กับดัก 1: setCount(count + 1) สามครั้งติด ได้ +1 ไม่ใช่ +3

นี่คือกับดักที่เจอบ่อยที่สุดในโค้ดของมือใหม่ และมันไม่พังแบบมี error ให้เห็น — มันแค่ได้เลขผิด

'use client';
import { useState } from 'react';

export default function TripleStale() {
  const [count, setCount] = useState(0);

  const addThree = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return <button onClick={addThree}>Stale: {count}</button>;
}

start          -> Stale: 0
stale click 1  -> Stale: 1     // ไม่ใช่ 3
stale click 2  -> Stale: 2     // ไม่ใช่ 6

ทางแก้คือส่งฟังก์ชันให้ setCount แทนที่จะส่งค่า
ฟังก์ชันนั้นรับ "ค่าล่าสุดที่คิวรู้" เข้ามา แล้วคืนค่าใหม่ — React จะเอาแต่ละคิวมาต่อกันตามลำดับ

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

setCount((c) => c + 1);
setCount((c) => c + 1);
setCount((c) => c + 1);

ผลรันจริงของทั้งสองปุ่ม กดสลับกันในหน้าเดียวกัน:

stale click 1    -> Stale: 1
stale click 2    -> Stale: 2
updater click 1  -> Updater: 3
updater click 2  -> Updater: 6

6 · กับดัก 2: เซ็ตแล้วบรรทัดถัดไปยังเห็นค่าเก่า

สไลด์หน้า useState() Pitfall เขียนเตือนไว้ตรง ๆ ว่า "Calling the set function does NOT change the current state in the already executing code" — เรามารันดูว่ามันจริงแค่ไหน

'use client';
import { useState } from 'react';

export default function LogAfterSet() {
  const [name, setName] = useState('Taylor');

  const handleClick = () => {
    setName('Robin');
    console.log('name right after setName =', name);
  };

  console.log('render with name =', name);

  return <button onClick={handleClick}>Name: {name}</button>;
}

[log] name right after setName = Taylor
[log] render with name = Robin

7 · state หลายตัวในหนึ่ง component

เรียก useState กี่ครั้งก็ได้ในหนึ่ง component แต่ละครั้งได้กล่องเก็บค่าคนละใบ ไม่ยุ่งกัน — ตรงตามที่สไลด์หน้า useState() Usage แสดงไว้

'use client';

import { useState } from 'react';

export default function Profile() {
  const [age, setAge] = useState(10);
  const [name, setName] = useState('Taylor');

  return (
    <div>
      <button onClick={() => setAge(age + 1)}>Age: {age}</button>
      <button onClick={() => setName('Robin')}>Who: {name}</button>
    </div>
  );
}

กดจริงสลับกัน ได้ผลว่าอีกตัวไม่ถูกแตะเลย:

start                -> Age: 10 | Who: Taylor
after age click      -> Age: 11 | Who: Taylor
after age click 2    -> Age: 12 | Who: Taylor
after name click     -> Age: 12 | Who: Robin

8 · ทดสอบความเข้าใจ

9 · สรุปสั้น ๆ ก่อนไปบทหน้า

บทหน้าจะเจอ hook ตัวที่สอง — useEffect — ซึ่งเอาไว้สั่งให้ทำอะไรบางอย่าง หลังหน้าวาดเสร็จ และมันมีกับดักหนักกว่าบทนี้อีก โดยเฉพาะการวนไม่รู้จบ ที่เกิดจากการเรียก setState ผิดที่ — ซึ่งจะเข้าใจได้ก็ต่อเมื่อคุณเข้าใจวงจร re-render ของบทนี้แล้ว

อ้างอิง

• React — useState reference — อ่านหัวข้อ Caveats ของ set function ที่เขียนไว้ตรง ๆ ว่า มันไม่เปลี่ยนค่าในโค้ดที่กำลังรันอยู่ · แล้วเลื่อนลงไปอ่าน "I've updated the state, but logging gives me the old value" ในหัวข้อ Troubleshooting — คืออาการเป๊ะ ๆ ของหัวข้อ 6 ในบทนี้
• React — State as a Snapshot — อ่านหัวข้อ Rendering takes a snapshot in time ซึ่งอธิบายว่าทำไม count ในหนึ่งรอบวาดถึงเป็นค่านิ่ง ๆ ค่าเดียว นี่คือรากของกับดักทั้งสองอันในบทนี้
• React — Queueing a Series of State Updates — อ่านหัวข้อ React batches state updates ต่อด้วย Updating the same state multiple times before the next render แล้วดูตารางไล่คิวทีละบรรทัด จะเห็นชัดว่าทำไม setNumber(number + 1) สามครั้งถึงได้ +1 แต่ setNumber(n => n + 1) ได้ +3
• Next.js — 'use client' directive — ลิงก์นี้ Next.js พิมพ์ให้เองในข้อความ error ตอน build · อ่านหัวข้อ Reference ที่บอกว่าต้องวางบรรทัดบนสุด แล้วอ่านต่อเรื่อง How 'use client' works เพื่อดูว่าทำไมติดที่ไฟล์เดียวแล้วกิ่งที่ import ต่อกลายเป็น client ตามไปด้วย
• React — Render and Commit — อ่านสามขั้น Trigger → Render → Commit ให้จบ แล้วเทียบกับแผนภาพในหัวข้อ 4 ของบทนี้ · จะได้เห็นว่าคำว่า "re-render" ในบทสนทนาจริง มักหมายถึงแค่ขั้นที่สอง ไม่ได้แปลว่าหน้าจอถูกวาดใหม่ทั้งหน้า