useEffect — สั่งให้ทำอะไรบางอย่างหลังหน้าวาดเสร็จ

next        16.3.4   # Turbopack
react       19.2.8
react-dom   19.2.8
typescript  5.9.3    # จาก npx tsc -v ในโปรเจกต์
node        v24.14.0

1 · useEffect ทำอะไร

ลองนึกถึงลำดับที่เกิดขึ้นจริงเวลาหน้าเว็บ React แสดงผลหนึ่งครั้ง — สไลด์วาดไว้เป็นสามขั้น:

  React     ┌──────────────────┐
            │   Renders JSX    │   เอา state + props มาคำนวณว่าหน้าตาควรเป็นยังไง
            └────────┬─────────┘
                     ▼
  Browser   ┌──────────────────┐
            │  Render Screen   │   เบราว์เซอร์วาดจริงลงจอ ผู้ใช้เห็นแล้วตอนนี้
            └────────┬─────────┘
                     ▼
  Then      ┌──────────────────┐
            │  Effect trigger  │   <-- useEffect ทำงานตรงนี้ หลังผู้ใช้เห็นหน้าแล้ว
            └──────────────────┘

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

โครงของมันมีแค่นี้ — สองส่วนที่ต้องส่งเข้าไป:

useEffect(() => {
  // setup — โค้ดที่อยากให้ทำ
}, [dependencies]);

ก้อนแรกคือฟังก์ชัน · ก้อนที่สองคืออาร์เรย์
อาร์เรย์ตัวนั้นแหละคือของที่ทำให้คนพัง — มันคือคำตอบของคำถาม "ให้รันใหม่ตอนไหน" ไม่ใช่ "ให้ส่งค่าอะไรเข้าไป"

2 · ก่อนอื่น — ไม่มี 'use client' คือจบตั้งแต่ build

ใน App Router ของ Next.js ทุกไฟล์เป็น Server Component โดยปริยาย แปลว่ามันรันบนเซิร์ฟเวอร์แล้วส่ง HTML ที่เสร็จแล้วมาให้เบราว์เซอร์
ของบนเซิร์ฟเวอร์ไม่มี "หลังหน้าวาดเสร็จ" ให้รอ — useEffect จึงใช้ในนั้นไม่ได้

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

export default function Page() {
  const [msg, setMsg] = useState('ยังไม่ทำงาน');

  useEffect(() => {
    setMsg('effect ทำงานแล้ว');
  }, []);

  return <p>{msg}</p>;
}

> Build error occurred
Error: Turbopack build failed with 2 errors:
./app/t74/broken/page.tsx:2:10
Error: You're importing a module that depends on `useEffect` 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 | // app/t74/broken/page.tsx  — สังเกตว่าไม่มี 'use client' บรรทัดบนสุด
> 2 | import { useEffect, useState } from 'react';
    |          ^^^^^^^^^
  3 |
  4 | export default function Page() {
  5 |   const [msg, setMsg] = useState('ยังไม่ทำงาน');

Ecmascript file had an error

3 · dependency array — สามแบบ และมันต่างกันจริง

ตัวอย่างในสไลด์คือห้องแชท — เปลี่ยนห้องเมื่อไหร่ ต้องตัดสายห้องเก่าแล้วต่อสายห้องใหม่
นี่คือไฟล์ที่ผมรันจริง (components/t74/ChatRoom.tsx) ตัด createConnection ปลอมออกให้ดูเฉพาะส่วนสำคัญ:

'use client';

import { useEffect, useState } from 'react';

export default function ChatRoom() {
  const [roomId, setRoomId] = useState('general');
  const serverUrl = 'https://localhost:1234';

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);  // setup
    connection.connect();
    return () => connection.disconnect();                    // cleanup
  }, [serverUrl, roomId]);                                  // dependencies

  return (
    <div>
      <p>ห้องปัจจุบัน: {roomId}</p>
      <button onClick={() => setRoomId('random')}>ย้ายไปห้อง random</button>
      <button onClick={() => setRoomId('support')}>ย้ายไปห้อง support</button>
    </div>
  );
}

เปิดหน้านี้ด้วย npx next dev แล้วกดปุ่มสองปุ่มตามลำดับ · นี่คือ console จริง ครบทุกบรรทัดของเรา ไม่ได้ตัดอะไรออกเลย (ตัดออกแค่สองบรรทัดที่ Next.js กับ React ขึ้นให้ทุกหน้าอยู่แล้ว คือ Download the React DevTools… กับ [HMR] connected):

✅ เชื่อมต่อห้อง general ที่ https://localhost:1234
❌ ตัดการเชื่อมต่อห้อง general
✅ เชื่อมต่อห้อง general ที่ https://localhost:1234
❌ ตัดการเชื่อมต่อห้อง general
✅ เชื่อมต่อห้อง random ที่ https://localhost:1234
❌ ตัดการเชื่อมต่อห้อง random
✅ เชื่อมต่อห้อง support ที่ https://localhost:1234

มีสองเรื่องซ่อนอยู่ในผลนี้ และทั้งสองเรื่องคือหัวข้อถัดไป:

• สามบรรทัดแรก เกิดตอนเปิดหน้าเฉย ๆ ยังไม่ได้กดอะไรเลย — ต่อ ตัด แล้วต่อใหม่ · นั่นคือ Strict Mode ในโหมด dev (หัวข้อ 5)
• ทุกครั้งที่ย้ายห้อง มี ❌ ของห้องเก่ามาก่อน ✅ ของห้องใหม่เสมอ — แปลว่า cleanup ไม่ได้รันแค่ตอนออกจากหน้า อย่างที่สไลด์เขียน แต่รันก่อนการรันรอบใหม่ทุกรอบด้วย (หัวข้อ 6)

4 · กับดัก 1 — ลืม dependency array แล้วมี setState ข้างใน

อันนี้คือกับดักที่มือใหม่ตกกันแทบทุกคน เพราะโค้ดมันอ่านดูสมเหตุสมผลมาก:

'use client';

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    console.log('[NoDeps] effect ทำงาน count =', count);
    setCount(count + 1);
  });                       // <-- ลืมใส่ [] ตรงนี้

  return <p>count = {count}</p>;
}

Maximum update depth exceeded. This can happen when a component calls
setState inside useEffect, but useEffect either doesn't have a dependency
array, or one of the dependencies changes on every render.

useEffect(() => {
  setCount(count + 1);
});

useEffect(() => {
  setCount(count + 1);
}, []);

5 · กับดัก 2 — ใส่ [] แล้วมันยังรันสองครั้ง

อันนี้คือเรื่องที่ทำให้คนเสียเวลาไล่หาสาเหตุเป็นชั่วโมง เพราะมันไม่ใช่บั๊ก แต่หน้าตาเหมือนบั๊กทุกอย่าง
ลองอันง่ายที่สุด — effect ที่ทำแค่ console.log แล้วใส่ [] ปิดท้าย:

'use client';

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    console.log('[RunsOnce] effect ทำงาน');
  }, []);

  return <button onClick={() => setCount(count + 1)}>กดแล้ว {count} ครั้ง</button>;
}

console จริงตอนเปิดหน้าด้วย npx next dev — ยังไม่ได้กดปุ่มเลยสักครั้ง (หน้านี้มี Clock จากหัวข้อ 6 วางอยู่ด้วย จะได้เห็น cleanup ไปพร้อมกัน · ตัด Download the React DevTools… กับ [HMR] connected ออก):

[Clock] setup: ตั้ง setInterval
[RunsOnce] effect ทำงาน
[Clock] cleanup: clearInterval 10
[Clock] setup: ตั้ง setInterval
[RunsOnce] effect ทำงาน

[RunsOnce] effect ทำงาน ขึ้นมาสองครั้ง ทั้งที่ใส่ [] ไว้แล้ว
และของ Clock ยิ่งชัด — setup → cleanup → setup ครบชุด

# build เป็น production แล้วเปิดด้วย next start
npx next build
npx next start -p 3074

[Clock] setup: ตั้ง setInterval
[RunsOnce] effect ทำงาน

6 · cleanup — ญาติของ defer ที่คุณเรียนไปแล้ว

ตอนเรียน Go คุณเจอท่านี้มาแล้วใน บทเรียน 08: เปิดของอะไรไว้ ให้เขียนคำสั่งปิดไว้ติดกันเลย จะได้ไม่ลืม

f, err := os.Open("data.txt")
if err != nil {
    return err
}
defer f.Close()

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

กับดัก 3 — ลืม cleanup แล้ว timer ค้าง

ผมทำสองอันมาวางเทียบกัน ต่างกันบรรทัดเดียว คือมี return หรือไม่มี:

useEffect(() => {
  const id = setInterval(() => {
    ticks = ticks + 1;
    console.log('[Leaky] tick!', ticks);
  }, 1000);
  // ลืม return cleanup
}, []);

useEffect(() => {
  const id = setInterval(() => {
    ticks = ticks + 1;
    console.log('[Tidy] tick!', ticks);
  }, 1000);
  return () => clearInterval(id);
}, []);

วิธีทดลอง: เอา component ตัวนี้ใส่-ถอดออกจากหน้าสลับกัน 8 ครั้ง แล้วปิดท้ายด้วยการถอดออก (บนหน้าไม่เหลือมันแล้ว)
จากนั้นนับว่าใน 3 วินาทีถัดมา มี tick กี่ครั้ง — ตัวเลขนี้อ่านมาจาก console จริง:

ทำไมถึงได้ 8 ตัว ทั้งที่กดใส่-ถอดแค่ 8 ครั้ง (= ใส่จริง 4 ครั้ง)?
เพราะStrict Mode ในหัวข้อ 5 นั่นแหละ — ใส่หนึ่งครั้ง effect รันสองรอบ = ได้ timer สองตัว · ใส่ 4 ครั้ง = 8 ตัว ตรงเป๊ะ
กับดักสองอันนี้ทบกัน และนี่คือเหตุผลที่ Strict Mode มีอยู่: ถ้าคุณเขียน cleanup ถูก ตัวเลขจะเป็น 0 ไม่ว่าจะรันกี่รอบ

7 · กับดัก 4 — โค้ดนาฬิกาในสไลด์ พังทันทีที่วางลง Next.js

สไลด์หน้า 42 ให้ตัวอย่างนาฬิกาไว้แบบนี้ (แปลงเป็นไฟล์เต็มพร้อม 'use client' แล้ว):

'use client';

import { useEffect, useState } from 'react';

export default function Clock() {
  const [now, setNow] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return <time>{now.toLocaleTimeString()}</time>;
}

effect เขียนถูกทุกอย่าง — มี [] · มี cleanup · npx tsc --noEmit ผ่าน · npx next build ผ่าน
แต่พอเปิดหน้าจริง Next.js เด้ง error overlay สีแดง ขึ้นมา นี่คือข้อความจริงที่ได้:

Recoverable Error
Hydration failed because the server rendered text didn't match the client.
As a result this tree will be regenerated on the client.
This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes
  each time it's called.
- Date formatting in a user's locale which doesn't match the server.
...

+ Client
- Server

  <Clock>
    <time>
+     3:39:24 PM
-     3:39:23 PM

components/t74/Clock.tsx (17:10) @ Clock

อ่านสองบรรทัดล่างสุดก็จบเรื่อง — เซิร์ฟเวอร์เขียน 3:39:23 PM · เบราว์เซอร์คำนวณได้ 3:39:24 PM
สาเหตุ: 'use client' ไม่ได้แปลว่า "รันแค่บนเบราว์เซอร์" · Next.js ยัง render component นี้บนเซิร์ฟเวอร์หนึ่งรอบเพื่อทำ HTML ตั้งต้น แล้วเบราว์เซอร์ค่อยมา "รับช่วงต่อ" (คำว่า hydration)
ค่าตั้งต้นของ useState จึงถูกคำนวณสองที่ คนละเวลา — new Date() ให้คนละค่าแน่นอน

'use client';

import { useEffect, useState } from 'react';

export default function ClockSafe() {
  const [now, setNow] = useState<string | null>(null);

  useEffect(() => {
    const id = setInterval(() => setNow(new Date().toLocaleTimeString()), 1000);
    return () => clearInterval(id);
  }, []);

  return <time>{now ?? '--:--:--'}</time>;
}

8 · ESLint ของ Next 16 ดักให้แล้ว ก่อนคุณจะทันได้รัน

ทั้งหมดที่ผ่านมา ผมรันจนเจอเอง — แต่จริง ๆ แล้ว config ที่ create-next-app แถมมาให้ จับได้ตั้งแต่ยังไม่รัน · นี่คือผลจริงของ npx eslint components/t74:

components/t74/LeakyTimer.tsx
  9:11  warning  'id' is assigned a value but never used
                 @typescript-eslint/no-unused-vars

components/t74/MissingDep.tsx
  9:6   warning  React Hook useEffect has a missing dependency: 'userId'.
                 Either include it or remove the dependency array
                 react-hooks/exhaustive-deps

components/t74/NoDeps.tsx
  8:3   warning  React Hook useEffect contains a call to 'setCount'. Without a
                 list of dependencies, this can lead to an infinite chain of
                 updates. To fix this, pass [count] as a second argument to the
                 useEffect Hook
                 react-hooks/exhaustive-deps
  10:5  error    Error: Calling setState synchronously within an effect can
                 trigger cascading renders
                 react-hooks/set-state-in-effect

✖ 4 problems (1 error, 3 warnings)

อ่านสี่อันนี้ให้ดี — มันคือกับดักทั้งหมดในบทนี้ พูดออกมาเป็นภาษาอังกฤษก่อนที่คุณจะเสียเวลาไล่หา
อันแรกน่าสนใจที่สุด: มันไม่ได้รู้เรื่อง React เลย มันแค่บอกว่า "คุณสร้างตัวแปร id ขึ้นมาแล้วไม่ได้ใช้" — ซึ่งแปลว่าคุณลืม clearInterval(id) พอดี
และสังเกตบรรทัดสุดท้าย: 1 error ปนมากับ warning ด้วย · ตัวนั้นคือกฎใหม่ในกล่องข้างล่าง

components/t74/ClockSync.tsx
  9:5  error  Error: Calling setState synchronously within an effect can
              trigger cascading renders
...
Calling setState synchronously within an effect body causes cascading
renders that can hurt performance, and is not recommended.
(https://react.dev/learn/you-might-not-need-an-effect).

components/t74/ClockSync.tsx:9:5
   7 |
   8 |   useEffect(() => {
>  9 |     setNow(new Date().toLocaleTimeString());
     |     ^^^^^^ Avoid calling setState() directly within an effect
  10 |     const id = setInterval(() => setNow(new Date().toLocaleTimeString()), 1000);
  11 |     return () => clearInterval(id);
  12 |   }, []);  react-hooks/set-state-in-effect

✖ 1 problem (1 error, 0 warnings)

ลิงก์ที่อยู่ในข้อความ error — "You Might Not Need an Effect" — คือคำใบ้ที่ทีม React พยายามบอกมาหลายปีแล้ว: useEffect ถูกใช้ผิดที่บ่อยกว่าใช้ถูกที่
ตารางข้างล่างคือเส้นแบ่ง ถ้าจำได้ตารางเดียวก็คุ้มทั้งบท:

9 · สรุปเป็นภาพเดียว

เปิดหน้าครั้งแรก
   └─ วาดจอเสร็จ ──> setup รัน          (dev: setup → cleanup → setup)

dependency เปลี่ยน
   └─ วาดจอเสร็จ ──> cleanup ของรอบเก่า ──> setup รอบใหม่

component ออกจากหน้า
   └────────────> cleanup รันครั้งสุดท้าย   (ไม่มี setup ตามมาแล้ว)

ไม่ใส่ dependency array
   └─ วาดจอเสร็จ ──> setup รัน ──> ถ้ามี setState ──> วาดใหม่ ──> วนกลับไปข้อบน ♾️

อ้างอิง

• React — useEffect — อ่านหัวข้อ Parameters ให้จบ โดยเฉพาะประโยคที่บอกว่า React จะเทียบ dependency ด้วย Object.is · นี่คือคำอธิบายว่าทำไมใส่ object หรือ array เป็น dependency แล้ว effect ถึงรันทุกรอบ
• React — Synchronizing with Effects — อ่านหัวข้อ How to handle the Effect firing twice in development? ซึ่งตอบกับดักในหัวข้อ 5 ของบทนี้ตรง ๆ · ทีม React เขียนไว้ชัดว่าวิธีแก้ที่ถูกคือ "ทำให้ effect ทนการรันซ้ำ" ไม่ใช่ "หาทางไม่ให้มันรันซ้ำ"
• React — You Might Not Need an Effect — หน้าเดียวกับที่ ESLint แปะลิงก์มาให้ในข้อความ error · อ่านหัวข้อ Updating state based on props or state ก่อนเป็นอันแรก เพราะเป็นเคสที่มือใหม่เขียน useEffect ผิดบ่อยที่สุด
• React — Connecting to an external system — ตัวอย่าง ChatRoom ตัวเดียวกับในสไลด์หน้า 41 · ดูปุ่ม Show more ที่มีตัวอย่างครบทั้ง connection · event listener · animation แล้วสังเกตว่าทุกตัวมี return ไม่มียกเว้น
• Next.js — 'use client' — หน้าเดียวกับที่ลิงก์อยู่ใน build error ในหัวข้อ 2 · อ่านหัวข้อ How "use client" works ให้เห็นว่าคำสั่งนี้แบ่งโปรเจกต์เป็นสองฝั่งยังไง และทำไม Client Component ถึงยังถูก render บนเซิร์ฟเวอร์อยู่ดี (คำตอบของกับดักในหัวข้อ 7)
• Next.js — Text content does not match server-rendered HTML — หน้าเดียวกับที่ error overlay ลิงก์มาให้ · อ่านตาราง Common causes แล้วจะเห็นว่า Date กับ Math.random() อยู่บรรทัดต้น ๆ · ท้ายหน้ามีท่า suppressHydrationWarning ให้ด้วย — อ่านให้รู้ว่ามีอยู่ แต่อย่าเพิ่งใช้ก่อนที่จะแก้ที่ต้นเหตุ
• React — <StrictMode> — อ่านหัวข้อ Fixing bugs found by re-running Effects in development ซึ่งอธิบายว่าการรันซ้ำเป็นการทดสอบอะไร · Next.js เปิดตัวนี้ให้ในโหมด dev อยู่แล้ว คุณไม่ต้องไปใส่เอง