useContext — ส่งค่าข้ามหลายชั้นโดยไม่ต้องส่งต่อทีละชั้น

next        16.3.4        # จาก npx next --version
react       19.2.8        # จาก package.json ของโปรเจกต์
react-dom   19.2.8
typescript  5.9.3         # จาก npx tsc --version
node        v24.14.0      # จาก node --version

1 · ปัญหาก่อน — ส่ง prop ผ่าน 3 ชั้นให้ดูของจริง

สมมติหน้าเว็บมีข้อมูลผู้ใช้อยู่บนสุด แล้วคนที่ต้องใช้จริง ๆ คือป้ายชื่อเล็ก ๆ ที่อยู่ลึกสุด
โครงเป็นแบบนี้:

ไฟล์จริงที่ผมรัน — app/t76/drilling/page.tsx (เป็น Server Component ล้วน ไม่มี hook เลย ไม่ต้องใส่ 'use client'):

type User = { name: string; role: string };

function UserBadge({ user }: { user: User }) {
  return (
    <span>
      {user.name} ({user.role})
    </span>
  );
}

function Menu({ user }: { user: User }) {          // ไม่ได้ใช้ user เลย
  return (
    <nav>
      <UserBadge user={user} />
    </nav>
  );
}

function Sidebar({ user }: { user: User }) {       // ก็ไม่ได้ใช้ user เลย
  return (
    <aside>
      <Menu user={user} />
    </aside>
  );
}

export default function DrillingPage() {
  const user: User = { name: 'สมชาย', role: 'admin' };
  return (
    <main>
      <h1>prop drilling</h1>
      <Sidebar user={user} />
    </main>
  );
}

อันนี้ทำงานได้จริง ไม่ได้พัง — ผมรัน dev server แล้ว curl เข้าไปดู:

$ curl -s -o /dev/null -w '%{http_code}\n' http://localhost:376/t76/drilling
200

# ใน log ของ next dev
 GET /t76/drilling 200 in 79ms (next.js: 67ms, application-code: 12ms)

ปัญหาไม่ใช่ "มันพัง" — ปัญหาคือ Sidebar กับ Menu ถูกบังคับให้รู้จัก user ทั้งที่ไม่ได้ใช้
ลองนึกว่าวันหนึ่งเราอยากส่ง theme ลงไปด้วย ต้องไปแก้กี่ไฟล์? — แก้ทั้ง 4 ไฟล์ ทั้งที่คนใช้จริงมีคนเดียว
แล้วถ้าโครงลึก 6 ชั้น มี 12 component ที่แค่ "ส่งผ่าน"? นั่นแหละที่เรียกว่า prop drilling

2 · useContext แก้ปัญหานี้ยังไง

แนวคิดคือ แทนที่จะส่งค่าลงไปทีละชั้น เราวางค่าไว้ที่ชั้นบน แล้วให้คนข้างล่างเอื้อมขึ้นมาหยิบเอง
ทำ 3 ขั้น:

จุดที่คนมักเข้าใจผิดตั้งแต่แรก: useContext ไม่ได้มองหา "Provider ที่ไหนก็ได้ในโปรแกรม" มันไต่ขึ้นไปตามต้นไม้ของ component จากจุดที่เรียก แล้วหยุดที่ Provider ตัวที่ใกล้ที่สุดที่อยู่เหนือมัน
สไลด์หน้า 55 เขียนเรื่องนี้ไว้ตรง ๆ ว่า "Always look for the closest provider above the component that calls" และเตือนต่อว่า "Does not consider providers in the component that calls" — แปลว่า ถ้าคุณ return Provider ออกไปจาก component เดียวกับที่เรียก useContext ตัวมันเองจะไม่เห็นค่านั้น เพราะ Provider ตัวนั้นอยู่ "ใต้" มัน ไม่ได้อยู่ "เหนือ" มัน

3 · เขียน context ของตัวเองแบบที่ใช้จริงในโปรเจกต์

สไลด์หน้า 54 แสดงท่ามาตรฐานไว้แล้ว: รวม context · Provider · และ hook สำหรับหยิบค่า ไว้ในไฟล์เดียว แล้วให้ที่อื่น import ไปใช้
นี่คือไฟล์จริงที่ผมรัน components/t76/theme.tsx — สังเกตบรรทัดแรก 'use client' เดี๋ยวหัวข้อ 7 จะพิสูจน์ให้ดูว่าถ้าไม่ใส่จะเจออะไร:

'use client';

import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';

export type Theme = { mode: 'light' | 'dark'; accent: string };

type ThemeBox = { theme: Theme; toggle: () => void };

// ค่าเริ่มต้นเป็น undefined โดยตั้งใจ — เพื่อให้ "ลืมครอบ Provider" กลายเป็น error ที่อ่านออก
const ThemeContext = createContext<ThemeBox | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>({ mode: 'dark', accent: '#c8b89a' });

  // ห่อด้วย useMemo — เหตุผลอยู่ในหัวข้อ 6 และมีผลรันจริงยืนยัน
  const value = useMemo<ThemeBox>(
    () => ({
      theme,
      toggle: () =>
        setTheme((t) => ({ ...t, mode: t.mode === 'dark' ? 'light' : 'dark' })),
    }),
    [theme],
  );

  return <ThemeContext value={value}>{children}</ThemeContext>;
}

export function useTheme(): ThemeBox {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme ต้องเรียกใต้ <ThemeProvider> เท่านั้น');
  return ctx;
}

คนที่ใช้ค่าไม่ต้องรู้อะไรเลยนอกจากชื่อ hook — components/t76/badge.tsx:

'use client';

import { useTheme } from './theme';

export function UserBadge() {
  const { theme, toggle } = useTheme();      // ไม่มี prop สักตัว
  return (
    <span>
      โหมดตอนนี้: {theme.mode} / {theme.accent}{' '}
      <button onClick={toggle}>สลับ</button>
    </span>
  );
}

แล้วชั้นกลาง — app/t76/page.tsx — สะอาดขึ้นทันที เพราะ Sidebar กับ Menu ไม่ต้องรับ prop อะไรอีกแล้ว:

function Sidebar({ user }: { user: User }) {
  return <aside><Menu user={user} /></aside>;
}

function Menu({ user }: { user: User }) {
  return <nav><UserBadge user={user} /></nav>;
}

function Sidebar() {
  return <aside><Menu /></aside>;
}

function Menu() {
  return <nav><UserBadge /></nav>;
}

import { ThemeProvider } from '@/components/t76/theme';
import { UserBadge } from '@/components/t76/badge';

function Menu()    { return <nav><UserBadge /></nav>; }
function Sidebar() { return <aside><Menu /></aside>; }

export default function T76Page() {
  return (
    <ThemeProvider>
      <main>
        <h1>useContext</h1>
        <Sidebar />
      </main>
    </ThemeProvider>
  );
}

ผลรันจริงของหน้านี้ — ผ่านทั้ง type check และ build:

$ npx tsc --noEmit
# ไม่มี output = ผ่าน (exit code 0)

$ npx next build
  ▲ Next.js 16.3.4 (Turbopack)
✓ Running next.config.ts took 10ms

  Creating an optimized production build ...
✓ Compiled successfully in 3.0s
  Running TypeScript ...
  Finished TypeScript in 775ms ...
  Collecting page data using 9 workers ...
✓ Generating static pages using 9 workers (8/8) in 83ms
  Finalizing page optimization ...

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /t76
├ ○ /t76/both-forms
├ ○ /t76/drilling
├ ƒ /t76/no-guard
├ ƒ /t76/no-provider
├ ○ /t76/rerender
└ ƒ /t76/slide-style

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

/t76/both-forms คือหน้าทดลองของหัวข้อ 4 · ส่วนสามหน้าที่ขึ้น ƒ คือหน้ากับดักของหัวข้อ 5 ที่ผมตั้งใจใส่ export const dynamic = 'force-dynamic' ไว้
ถ้าไม่ใส่ Next.js จะพยายาม prerender หน้าที่ตั้งใจให้ throw ตั้งแต่ตอน build แล้ว next build จะพังทั้งโปรเจกต์ ทั้งที่หน้าอื่นเขียนถูกหมด

4 · Provider มีสองหน้าตา และสไลด์ใช้คนละแบบกันเอง

สไลด์หน้า 53 เขียน <ThemeContext value="dark"> (ไม่มี .Provider) แต่หน้า 54 เขียน <ThemeContext.Provider value={{ ...theme }}>
ไม่ใช่ว่าหน้าใดหน้าหนึ่งพิมพ์ผิด — ทั้งสองแบบใช้ได้จริงใน React 19 แบบสั้นเป็นของใหม่ที่ React 19 เพิ่มเข้ามา ส่วน .Provider เป็นของเดิม

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

const Ctx = createContext('default');

<Ctx.Provider value="แบบเก่า .Provider">
  <Read tag="old" />
</Ctx.Provider>

<Ctx value="แบบใหม่ React 19">
  <Read tag="new" />
</Ctx>

ผลที่ได้จาก HTML ที่ server ส่งกลับมาจริง:

$ curl -s -o /dev/null -w 'HTTP %{http_code}\n' http://localhost:376/t76/both-forms
HTTP 200

# ดึงเนื้อใน <p> ออกมา
'old: แบบเก่า .Provider'
'new: แบบใหม่ React 19'

const Ctx = createContext('A');

function Leaf() { return <p>{useContext(Ctx)}</p>; }

function App() {
  return (
    <Ctx value="B">
      <Ctx value="C">
        <Leaf />
      </Ctx>
    </Ctx>
  );
}

5 · กับดัก 1 — ลืมครอบ Provider (นี่คืออันที่เจอบ่อยที่สุด)

ผมทำหน้า app/t76/no-provider/page.tsx ที่เรียก <UserBadge /> ตรง ๆ โดยไม่ครอบ <ThemeProvider> แล้ว curl เข้าไป — ได้ HTTP 500 และ log ของ next dev ขึ้นแบบนี้ (ก็อปมาทั้งดุ้น):

⨯ Error: useTheme ต้องเรียกใต้ <ThemeProvider> เท่านั้น
    at useTheme (components/t76/theme.tsx:30:19)
    at UserBadge (components/t76/badge.tsx:6:37)
  28 | export function useTheme(): ThemeBox {
  29 |   const ctx = useContext(ThemeContext);
> 30 |   if (!ctx) throw new Error('useTheme ต้องเรียกใต้ <ThemeProvider> เท่านั้น');
     |                   ^
  31 |   return ctx;
  32 | }
  33 | {
  digest: '914102247'
}
 GET /t76/no-provider 500 in 143ms (next.js: 114ms, application-code: 28ms)

เลข 30 คือบรรทัดใน theme.tsx ที่โชว์ไว้ในหัวข้อ 3 นับทั้งไฟล์รวมคอมเมนต์ — ถ้าคุณลบคอมเมนต์สองบรรทัดนั้นออก เลขจะเลื่อนเป็น 28 แต่ยังชี้ที่บรรทัด throw เหมือนเดิม
เวลาอ่าน error ให้ดูที่บรรทัดที่มีลูกศร > ไม่ใช่จำเลขบรรทัด

error นี้อ่านออกเพราะเราเขียน guard ไว้เอง ทีนี้ลองดูว่าถ้าไม่เขียน guard จะเป็นยังไง — ผมทำอีกไฟล์ที่หยิบค่ามาใช้ตรง ๆ:

export const RawThemeContext = createContext<Theme | undefined>(undefined);

export function RawBadge() {
  const { mode } = useContext(RawThemeContext)!;   // ! คือบอก TS ว่า "เชื่อฉัน ไม่ undefined หรอก"
  return <span>โหมด: {mode}</span>;
}

npx tsc --noEmit ผ่านฉลุย เพราะเราใส่ ! ปิดปาก compiler ไว้ · แล้วพอรันจริง:

⨯ TypeError: Cannot destructure property 'mode' of '{imported module ...
   .../vendored/ssr/react.js}.useContext(...)' as it is undefined.
    at RawBadge (components/t76/theme-raw.tsx:10:11)
   8 |
   9 | export function RawBadge() {
> 10 |   const { mode } = useContext(RawThemeContext)!;
     |           ^
  11 |   return <span>โหมด: {mode}</span>;
  12 | }
 GET /t76/no-guard 500 in 121ms (next.js: 82ms, application-code: 39ms)

พังเหมือนกัน แต่ข้อความไม่ได้บอกว่า "ลืมครอบ Provider" เลยสักคำ — ต้องอ่านออกเองว่า useContext(...) คืน undefined แปลว่าอะไร
นี่คือเหตุผลที่ท่ามาตรฐานคือเขียน hook ครอบพร้อม guard เสมอ อย่าให้ที่อื่นเรียก useContext ตรง ๆ

จุดที่สไลด์หน้า 54 พลาด และผมรันพิสูจน์แล้ว

โค้ดในสไลด์หน้า 54 เขียนไว้แบบนี้ (คัดมาเฉพาะบรรทัดที่เกี่ยวข้อง):

const ThemeContext = createContext("light");          // ค่าเริ่มต้นเป็น string

export const ThemeProvider = () => {                    // ไม่ได้รับ children
  const [theme, setTheme] = useState({ mode: "dark", palette: { primary: [], secondary: [] } });

  return (
    <ThemeContext.Provider value={{ ...theme }}>
      {children}                                       // แต่ใช้ children
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

ผมก็อปโค้ดนี้มาทั้งดุ้นแล้วรัน npx tsc --noEmit ได้ error 2 อัน:

slide54/theme.tsx(14,28): error TS2322: Type '{ mode: string; palette: { primary: never[]; secondary: never[]; }; }'
                          is not assignable to type 'string'.
slide54/theme.tsx(15,8):  error TS2304: Cannot find name 'children'.

ผมทำหน้า app/t76/slide-style/page.tsx ที่ใช้ createContext('light') แบบสไลด์ แล้วเรียกใช้ โดยไม่ครอบ Provider เลย — เดาก่อนว่าจะได้อะไร:

const ThemeContext = createContext('light');

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

// หน้าเว็บเรียก <SlideBadge /> ที่ใช้ useTheme() โดยไม่มี Provider ครอบเลย

$ curl -s -o /tmp/ss.html -w 'HTTP %{http_code}\n' http://localhost:376/t76/slide-style
HTTP 200

# เนื้อในหน้าเว็บ
theme = [light]

# log ของ next dev — ไม่มีบรรทัด error เลย
 GET /t76/slide-style 200 in 96ms (next.js: 72ms, application-code: 24ms)

6 · กับดัก 2 — value เป็น object literal ทำให้ลูกทุกตัววาดใหม่

บทที่ 75 พูดเรื่อง "ค่าเดิมแต่กล่องใหม่" ไปแล้ว กับดักนี้คือเรื่องเดียวกันเป๊ะ แค่ย้ายมาอยู่บน Provider
ทุกครั้งที่ component แม่วาดใหม่ บรรทัด value={{ n }} จะสร้าง object ก้อนใหม่ · React เทียบค่า context ด้วย Object.is ก้อนใหม่จึง "ไม่เท่า" ก้อนเดิมเสมอ ทั้งที่ข้างในเหมือนกันทุกตัวอักษร → consumer ทุกตัววาดใหม่หมด

ผมทำหน้าทดลอง app/t76/rerender/page.tsx ที่มี context สองช่องเทียบกัน ลูกทั้งสองตัวห่อด้วย memo เหมือนกัน และค่า n ไม่เคยเปลี่ยนเลย (เป็น 1 ตลอด) · ปุ่มที่กดแค่เปลี่ยน tick ซึ่งไม่เกี่ยวกับ context เลย:

const LiteralCtx = createContext<Box>({ n: 0 });
const MemoCtx    = createContext<Box>({ n: 0 });

const LiteralChild = memo(function LiteralChild() {
  const v = useContext(LiteralCtx);
  literalRenders += 1;
  console.log('[t76] LiteralChild render #' + literalRenders + ' n=' + v.n);
  return <p>literal: {v.n}</p>;
});
// MemoChild เขียนเหมือนกันทุกอย่าง ต่างแค่อ่านจาก MemoCtx

export default function RerenderPage() {
  const [tick, setTick] = useState(0);
  const n = 1;                                    // ค่าไม่เคยเปลี่ยนเลย
  const memoValue = useMemo<Box>(() => ({ n }), [n]);

  return (
    <main>
      <button onClick={() => setTick((t) => t + 1)}>tick = {tick}</button>

      <LiteralCtx value={{ n }}>          {/* object ก้อนใหม่ทุกรอบ */}
        <LiteralChild />
      </LiteralCtx>

      <MemoCtx value={memoValue}>         {/* ก้อนเดิมตราบใดที่ n ไม่เปลี่ยน */}
        <MemoChild />
      </MemoCtx>
    </main>
  );
}

[t76] Parent render, tick=1
[t76] Parent render, tick=1
[t76] LiteralChild render #3 n=1
[t76] LiteralChild render #4 n=1
[t76] Parent render, tick=2
[t76] Parent render, tick=2
[t76] LiteralChild render #5 n=1
[t76] LiteralChild render #6 n=1

7 · กับดัก 3 — Provider ต้องเป็น client component

App Router ถือว่าทุกไฟล์เป็น Server Component จนกว่าจะเขียน 'use client' · และ createContext กับ useContext เป็นของฝั่ง client ล้วน ๆ
ผมลองทำหน้าที่ลืมใส่ 'use client' แล้วเรียกดู:

// app/t76/server-hook/page.tsx — ไม่มี 'use client'
import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

export default function ServerHookPage() {
  const theme = useContext(ThemeContext);
  return <p>{theme}</p>;
}

ผลรันจริง — HTTP 500 พร้อมข้อความนี้:

⨯ ./app/t76/server-hook/page.tsx:1:10
Error: You're importing a module that depends on `createContext` 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 { createContext, useContext } from 'react';
    |          ^^^^^^^^^^^^^
  2 |
  3 | const ThemeContext = createContext('light');
  4 |

Ecmascript file had an error

 GET /t76/server-hook 500 in 385ms (next.js: 341ms, application-code: 44ms)

ทางแก้ที่ถูกต้องไม่ใช่การใส่ 'use client' ที่หน้าเว็บ — ให้ใส่ที่ไฟล์ context แล้วหน้าเว็บ (ซึ่งยังเป็น Server Component) import Provider มาครอบได้ตามปกติ
ดูที่ app/t76/page.tsx ในหัวข้อ 3 — ไฟล์นั้นไม่มี 'use client' เลย แต่ครอบ <ThemeProvider> ได้ และ build ผ่านเป็น static (○ /t76 ในตารางผลลัพธ์)
เหตุผล: Server Component ส่ง Client Component ไปเป็น children ได้ สิ่งที่ห้ามคือการเรียก hook เองในไฟล์ที่เป็น server

8 · กับดัก 4 — context ไม่ใช่ตัวแทนของ redux

พอเห็นว่า "ส่งค่าไปทั้งเว็บได้โดยไม่ต้องส่ง prop" คนมักสรุปทันทีว่า "งั้นเอา context เก็บ state ทั้งแอปเลยสิ ไม่ต้องใช้ Redux / Zustand แล้ว" — อันนี้ต้องระวัง

จากผลรันในหัวข้อ 6 เราเห็นแล้วว่า เมื่อค่าใน context เปลี่ยน consumer ทุกตัววาดใหม่หมด ไม่มีการเลือกเฉพาะคนที่ใช้ field ที่เปลี่ยน
ถ้าเอา state ทั้งแอปยัดใส่ context ก้อนเดียว การกดปุ่มเปลี่ยนแค่ชื่อผู้ใช้ ก็จะทำให้ทุกหน้าจอที่แตะ context นั้นวาดใหม่พร้อมกันหมด

วิธีคิดที่ใช้ตัดสินใจได้จริง: context แก้ปัญหา "ส่งค่ายังไง" ไม่ได้แก้ปัญหา "จัดการ state ยังไง"
ถ้าปัญหาของคุณคือ prop drilling → context ตอบโจทย์เลย · ถ้าปัญหาคือ state ซับซ้อน มีหลายคนแก้ หลายที่ฟัง อยากได้ devtools ย้อนดูได้ → นั่นคนละปัญหา

9 · สรุปเป็นเช็คลิสต์ที่เอาไปใช้ได้เลย

อ้างอิง

• React — useContext — อ่านหัวข้อ Caveats ที่เขียนไว้ตรง ๆ ว่า Provider ที่ return จาก component เดียวกัน จะไม่ถูกมองเห็นโดย useContext ใน component นั้น (ตรงกับที่สไลด์หน้า 55 เตือน) แล้วอ่านหัวข้อ Optimizing re-renders when passing objects and functions ต่อ ซึ่งเป็นเรื่องเดียวกับหัวข้อ 6 ของบทนี้
• React — createContext — อ่านย่อหน้าที่อธิบาย parameter defaultValue ที่บอกว่าค่านี้ถูกใช้ "ก็ต่อเมื่อไม่มี Provider ที่ตรงกันอยู่เหนือขึ้นไป" — และดูตัวอย่างที่เขาแนะนำให้ใส่ค่าที่ "never changes" · เทียบกับผลรันในหัวข้อ 5 ว่าทำไมค่าเริ่มต้นที่เป็น truthy ถึงอันตราย
• React — Passing Data Deeply with Context — อ่านหัวข้อ Before you use context ที่เขาแนะนำให้ลอง 2 ทางก่อน (ส่ง prop ตรง ๆ · หรือส่ง JSX ไปเป็น children) แล้วค่อยใช้ context — เป็นคำตอบเดียวกับหัวข้อ 8 ของบทนี้ในเรื่อง "context ไม่ใช่ยาครอบจักรวาล"
• Next.js — use client directive — ลิงก์นี้คือลิงก์ที่ตัว error เองแนะนำให้ไปอ่าน (ดูข้อความ error ในหัวข้อ 7) · อ่านหัวข้อที่ว่าด้วยการวาง 'use client' ให้ลึกที่สุดเท่าที่ทำได้ เพื่อเข้าใจว่าทำไมเราถึงใส่ที่ไฟล์ context ไม่ใช่ที่ page.tsx
• React — memo — อ่านหัวข้อ Caveats ข้อที่พูดถึง context ซึ่งระบุว่า memo ไม่กันการ re-render ที่เกิดจาก context ที่ component นั้น subscribe อยู่ — นี่คือคำอธิบายอย่างเป็นทางการของสิ่งที่คอนโซลในหัวข้อ 6 แสดงให้เห็น
• React — StrictMode — อ่านหัวข้อ Fixing bugs found by double rendering in development เพื่อเข้าใจว่าทำไม log ในหัวข้อ 6 ถึงขึ้นซ้ำสองบรรทัดทุกครั้ง และทำไมมันไม่ใช่บั๊ก