useMemo และ useCallback — จำผลลัพธ์ไว้ ไม่ต้องคิดใหม่ทุกครั้ง

next          16.3.4 (Turbopack)
react / react-dom  19.2.8
typescript    5
node          v24.14.0
# คำสั่งที่ใช้:
npx tsc --noEmit          # ไม่มี error (ไม่พิมพ์อะไรออกมาเลย)
npx eslint app components  # เอาคำเตือน react-hooks มาโชว์
npx next build            # ✓ Compiled successfully (เวลาที่โชว์ต่างกันทุกรอบ ไม่ต้องเทียบตัวเลข)
npx next dev -p 375       # แล้วกดปุ่มจริงในเบราว์เซอร์ อ่าน console

1 · ก่อนอื่น: React วาดใหม่ทั้งตัว ทุกครั้งที่ state เปลี่ยน

นี่คือรากของทั้งบท ถ้าข้อนี้ไม่แน่น อีกสิบหัวข้อข้างล่างจะกลายเป็นการท่องจำทันที

ตอนคุณกด setCount(1) ในบท 73 สิ่งที่ React ทำคือ เรียกฟังก์ชัน component ของคุณใหม่ทั้งฟังก์ชัน ตั้งแต่บรรทัดแรกถึงบรรทัดสุดท้าย
ไม่ได้แก้เฉพาะตัวเลขบนจอ · ไม่ได้ "อัปเดตแค่ส่วนที่เปลี่ยน" ในระดับโค้ด — โค้ดในตัว component ถูกรันซ้ำหมด

แปลว่าทุกบรรทัดแบบนี้ ถูกทำใหม่ทุกครั้งที่วาด:

function TodoList({ todos, tab }) {
  const visible = filterTodos(todos, tab);   // ← คำนวณใหม่ทุกครั้ง
  const handleClick = () => {};             // ← สร้างฟังก์ชันก้อนใหม่ทุกครั้ง
  // ...
}

ปกติไม่เป็นไร เพราะงานพวกนี้เร็วมาก · แต่มันเริ่มเป็นเรื่องเมื่อ

• filterTodos ทำงานกับข้อมูลหลักหมื่นแถว → ช้าจนรู้สึกได้
• ค่าที่คำนวณได้ถูกส่งเป็น prop ให้ลูก → ลูกเห็น "ของใหม่" ทุกครั้งเลยวาดใหม่ตาม

useMemo กับ useCallback เกิดมาเพื่อสองเคสนี้ เท่านั้น

2 · useMemo — จำ "ค่า" ที่คำนวณได้

สไลด์หน้า 44 เขียนไว้สั้นมากว่า "Cache the result of a calculation between re-renders" — แปลตรงตัวคือ เก็บผลลัพธ์ของการคำนวณไว้ใช้ข้ามการวาด

const cachedValue = useMemo(() => {
  // calculate value
}, [dependencies])

สไลด์หน้า 45 แยกชิ้นส่วนไว้ 3 อย่าง ซึ่งตรงกับของจริงทุกตัว:

ตัวอย่างของสไลด์หน้า 45–46 คือ TodoList:

const TodoList = ({ todos, tab }) => {
  const visibleTodos = useMemo(() => {
    return filterTodos(todos, tab);
  }, [todos, tab]);

  return (
    <ul>
      {visibleTodos.map(todo => <li key={todo.id}>{todo.text}</li>)}
    </ul>
  );
};

แผนภาพหน้า 46 สรุปลำดับไว้ว่า Tab changed → Recalculate function → Re-render
อ่านให้ดี — มันบอกว่า "คำนวณใหม่" เกิดขึ้นเฉพาะตอน dependency เปลี่ยน ส่วน "วาดใหม่" เกิดได้บ่อยกว่านั้นเยอะ

ของจริง: กดปุ่มที่ไม่เกี่ยวข้อง แล้วดูว่ามันคำนวณใหม่ไหม

ผมสร้างไฟล์นี้ในโปรเจกต์ Next.js จริง (components/MemoDemo.tsx) แล้วรัน:

'use client';

import { useMemo, useState } from 'react';
import { bump } from './counter';   // ตัวนับเล็ก ๆ ที่ผมเขียนเอง

function slowSum(n: number): number {
  console.log(`[คำนวณ] รอบที่ ${bump('calc')} · n=${n}`);
  let total = 0;
  for (let i = 0; i < n; i += 1) total += i;
  return total;
}

export default function MemoDemo() {
  const [n, setN] = useState(1000);
  const [tick, setTick] = useState(0);

  const sum = useMemo(() => slowSum(n), [n]);   // ผูกไว้กับ n ตัวเดียว

  return (
    <div>
      <p>sum={sum} tick={tick}</p>
      <button onClick={() => setN(v => v + 1000)}>เปลี่ยน n</button>
      <button onClick={() => setTick(v => v + 1)}>tick +1</button>
    </div>
  );
}

เปิดหน้าเว็บ แล้วกดปุ่มตามลำดับนี้ · นี่คือ console จริง (ผมแทรกบรรทัด ##### ไว้เองเพื่อคั่นจังหวะ):

[คำนวณ] รอบที่ 1 · n=1000
[คำนวณ] รอบที่ 2 · n=1000
##### B · กด tick +1 (state ที่ไม่เกี่ยวกับ n) #####
##### C · กด เปลี่ยน n #####
[คำนวณ] รอบที่ 3 · n=2000
[คำนวณ] รอบที่ 4 · n=2000

ระหว่างบรรทัด B กับ C ว่างเปล่า — กด tick +1 แล้ว component ถูกวาดใหม่จริง (ตัวเลข tick บนจอเปลี่ยนเป็น 1) แต่ slowSum ไม่ถูกเรียกเลย เพราะ n ยังเป็น 1000 เท่าเดิม
พอกด "เปลี่ยน n" เท่านั้นแหละ มันถึงคำนวณใหม่ — และค่าที่ได้บนจอคือ sum=1999000 ซึ่งคือผลรวม 0 ถึง 1999 จริง ๆ

3 · useCallback — จำ "ฟังก์ชัน" ไม่ใช่ค่า

สไลด์หน้า 48 เขียนว่า "Caches a function definition between component re-renders"
สังเกตคำว่า definition — มันไม่เรียกฟังก์ชันของคุณ มันแค่เก็บก้อนฟังก์ชันนั้นไว้

const cachedFn = useCallback(() => {
  // function
}, [dependencies])

ตัวอย่างของสไลด์หน้า 49–50:

const ProductPage = ({ productId, referrer }) => {
  const handleSubmit = useCallback(
    (orderDetails) => {
      post(`/product/${productId}/buy`, { referrer, orderDetails });
    },
    [productId, referrer],
  );

  return <ShippingForm onSubmit={handleSubmit} />;
};

ต่างจาก useMemo ตรงที่ฟังก์ชันข้างในนี้ รับอาร์กิวเมนต์ได้ (orderDetails) เพราะมันคือฟังก์ชันที่จะถูกเรียกทีหลัง ตอนคนกดปุ่ม ไม่ใช่ฟังก์ชันที่ React เรียกให้ตอนนี้

ทำไมต้อง "จำฟังก์ชัน" ในเมื่อโค้ดข้างในเหมือนเดิมทุกครั้ง

เพราะ JavaScript ตัดสินว่าฟังก์ชันสองก้อน "เท่ากัน" หรือไม่ จากว่ามันเป็นก้อนเดียวกันในหน่วยความจำหรือเปล่า ไม่ใช่จากเนื้อโค้ดข้างใน
เขียน () => {} สองครั้ง = ได้ของสองก้อนที่ไม่เท่ากัน แม้จะพิมพ์เหมือนกันเป๊ะ

ตัวช่วยก่อน — seeFn เก็บก้อนฟังก์ชันลง Set แล้วคืนจำนวนก้อนที่ไม่ซ้ำกัน (Set ตัดของซ้ำด้วยกฎเดียวกับ === พอดี) · อยู่ใน components/counter.ts ไฟล์เดียวกับ bump:

const seen = new Map<string, Set<unknown>>();

export function seeFn(label: string, fn: unknown): number {
  let s = seen.get(label);
  if (!s) {
    s = new Set<unknown>();
    seen.set(label, s);
  }
  s.add(fn);
  return s.size;
}

แล้วไฟล์ที่ใช้พิสูจน์จริง (components/IdentityDemo.tsx):

'use client';

import { useCallback, useMemo, useState } from 'react';
import { seeFn } from './counter';

export default function IdentityDemo() {
  const [tick, setTick] = useState(0);

  const plain   = () => {};                        // ไม่ห่ออะไรเลย
  const cached  = useCallback(() => {}, []);        // ห่อด้วย useCallback
  const viaMemo = useMemo(() => () => {}, []);     // ห่อด้วย useMemo แต่คืนฟังก์ชัน

  console.log(
    `[Identity] tick=${tick}` +
    ` · plain มีก้อนที่ไม่ซ้ำกัน ${seeFn('plain', plain)} ก้อน` +
    ` · cached มีก้อนที่ไม่ซ้ำกัน ${seeFn('cached', cached)} ก้อน` +
    ` · viaMemo มีก้อนที่ไม่ซ้ำกัน ${seeFn('viaMemo', viaMemo)} ก้อน`,
  );

  return <button onClick={() => setTick(v => v + 1)}>identity tick +1</button>;
}

โหลดหน้าใหม่ แล้วกดปุ่มสองครั้ง · console จริง:

[Identity] tick=0 · plain มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · cached มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · viaMemo มีก้อนที่ไม่ซ้ำกัน 1 ก้อน
[Identity] tick=0 · plain มีก้อนที่ไม่ซ้ำกัน 2 ก้อน · cached มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · viaMemo มีก้อนที่ไม่ซ้ำกัน 1 ก้อน
[Identity] tick=1 · plain มีก้อนที่ไม่ซ้ำกัน 3 ก้อน · cached มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · viaMemo มีก้อนที่ไม่ซ้ำกัน 1 ก้อน
[Identity] tick=1 · plain มีก้อนที่ไม่ซ้ำกัน 4 ก้อน · cached มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · viaMemo มีก้อนที่ไม่ซ้ำกัน 1 ก้อน
[Identity] tick=2 · plain มีก้อนที่ไม่ซ้ำกัน 5 ก้อน · cached มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · viaMemo มีก้อนที่ไม่ซ้ำกัน 1 ก้อน
[Identity] tick=2 · plain มีก้อนที่ไม่ซ้ำกัน 6 ก้อน · cached มีก้อนที่ไม่ซ้ำกัน 1 ก้อน · viaMemo มีก้อนที่ไม่ซ้ำกัน 1 ก้อน

อ่านสามคอลัมน์นี้ให้ครบ:

• plain เพิ่มขึ้นเรื่อย ๆ 1 → 6 — ทุกครั้งที่วาด ได้ฟังก์ชันก้อนใหม่จริง ๆ
• cached ค้างที่ 1 ตลอด — useCallback คืนก้อนเดิมให้ทุกครั้ง
• viaMemo ก็ค้างที่ 1 เหมือนกัน — พิสูจน์ว่า useCallback(fn, deps) ทำงานเหมือน useMemo(() => fn, deps) เป๊ะ (เอกสาร React เขียนไว้อย่างนั้น และผมรันแล้วเป็นอย่างนั้นจริง)

4 · ตารางเทียบสองตัว — จุดที่ต่างกันมีจุดเดียว

useMemo
  ส่งเข้าไป  :  () => filterTodos(todos, tab)     ← ฟังก์ชันที่ "คืนค่า"
  React ทำ   :  เรียกมัน แล้วเก็บผลไว้
  ได้กลับมา  :  [{id:1}, {id:2}]                  ← ★ ค่า ★

useCallback
  ส่งเข้าไป  :  (o) => post(url, o)               ← ฟังก์ชันที่จะใช้ทีหลัง
  React ทำ   :  ไม่เรียก · เก็บก้อนนี้ไว้เฉย ๆ
  ได้กลับมา  :  (o) => post(url, o)               ← ★ ฟังก์ชัน ★ ก้อนเดิมเป๊ะ

5 · กับดักที่ 1 — useCallback ที่ลูกไม่ได้ห่อ React.memo คือโค้ดที่ไม่ทำอะไรเลย

นี่คือความเข้าใจผิดที่แพงที่สุดของบทนี้ และเป็นเหตุผลที่โค้ดจำนวนมากเต็มไปด้วย useCallback โดยไม่ได้เร็วขึ้นแม้แต่นิดเดียว

useCallback ทำได้อย่างเดียวคือทำให้ prop ที่ส่งลงไปเป็นก้อนเดิม
แต่ ลูกจะสนใจว่า prop เป็นก้อนเดิมหรือไม่ ก็ต่อเมื่อมันถูกห่อด้วย React.memo
ลูกธรรมดา ๆ ที่ไม่ได้ห่อ จะวาดใหม่ทุกครั้งที่พ่อวาดใหม่ ไม่ว่า prop จะเปลี่ยนหรือไม่

ไฟล์ที่ผมใช้พิสูจน์ (components/CallbackDemo.tsx) — ลูกสองตัว ต่างกันแค่ห่อกับไม่ห่อ:

'use client';

import { memo, useCallback, useState } from 'react';
import { bump } from './counter';

// ลูกคนที่ 1 — ไม่ห่ออะไรเลย
function ChildPlain({ onPing }: { onPing: () => void }) {
  console.log(`[ChildPlain] วาดใหม่ครั้งที่ ${bump('plain')}`);
  return <button onClick={onPing}>ChildPlain</button>;
}

// ลูกคนที่ 2 — ห่อด้วย React.memo
const ChildMemo = memo(function ChildMemoInner({ onPing }: { onPing: () => void }) {
  console.log(`[ChildMemo] วาดใหม่ครั้งที่ ${bump('memo')}`);
  return <button onClick={onPing}>ChildMemo</button>;
});

export default function CallbackDemo() {
  const [count, setCount] = useState(0);
  const onPing = useCallback(() => {}, []);   // ← ก้อนเดิมตลอด

  console.log(`[Parent] วาดใหม่ count=${count}`);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+1 (count = {count})</button>
      <ChildPlain onPing={onPing} />
      <ChildMemo  onPing={onPing} />
    </div>
  );
}

[Parent] วาดใหม่ count=0
[Parent] วาดใหม่ count=0
[ChildPlain] วาดใหม่ครั้งที่ 1
[ChildPlain] วาดใหม่ครั้งที่ 2
[ChildMemo] วาดใหม่ครั้งที่ 1
[ChildMemo] วาดใหม่ครั้งที่ 2
##### A · กด +1 ของ CallbackDemo สองครั้ง #####
[Parent] วาดใหม่ count=1
[Parent] วาดใหม่ count=1
[ChildPlain] วาดใหม่ครั้งที่ 3
[ChildPlain] วาดใหม่ครั้งที่ 4
[Parent] วาดใหม่ count=2
[Parent] วาดใหม่ count=2
[ChildPlain] วาดใหม่ครั้งที่ 5
[ChildPlain] วาดใหม่ครั้งที่ 6

const onPing = useCallback(fn, []);
// ...
<ChildPlain onPing={onPing} />
// ChildPlain ไม่ได้ห่อ memo
// → วาดใหม่ทุกครั้งอยู่ดี

const onPing = useCallback(fn, []);
const ChildMemo = memo(Child);
// ...
<ChildMemo onPing={onPing} />
// → ข้ามการวาดได้จริง

6 · กับดักที่ 2 — dependency array ผิด แล้วได้ค่าเก่าค้าง

กับดักข้อ 1 ทำให้โค้ดไม่เร็วขึ้น (น่ารำคาญแต่ไม่พัง)
ข้อนี้ทำให้ตัวเลขบนหน้าเว็บผิด ซึ่งแย่กว่ากันเยอะ และหายากกว่าเยอะ

'use client';

import { useMemo, useState } from 'react';

export default function StaleDemo() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(1);

  const bad  = useMemo(() => a + b, [a]);      // ใช้ b แต่ไม่ได้ใส่ b
  const good = useMemo(() => a + b, [a, b]);   // ใส่ครบ

  return (
    <div>
      <p>a={a} b={b} bad={bad} good={good}</p>
      <button onClick={() => setA(v => v + 1)}>a +1</button>
      <button onClick={() => setB(v => v + 1)}>b +1</button>
    </div>
  );
}

เริ่มต้น          : a=1 b=1 bad=2 good=2
กด b +1           : a=1 b=2 bad=2 good=3
กด b +1 อีกครั้ง  : a=1 b=3 bad=2 good=4
กด a +1           : a=2 b=3 bad=5 good=5

ข่าวดี: มีเครื่องมือฟ้องให้ฟรี ๆ อยู่แล้ว

ผมรัน npx eslint กับไฟล์ทั้งโฟลเดอร์ ได้ผลนี้ตรง ๆ (โปรเจกต์ที่ create-next-app สร้างมี eslint-config-next ติดมาให้แล้ว):

components/StaleDemo.tsx
  9:37  warning  React Hook useMemo has a missing dependency: 'b'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)

9:37 คือ บรรทัดที่ 9 ตัวอักษรที่ 37 ของไฟล์ข้างบน — ชี้ตรงไปที่ [a] ไม่ใช่ที่ useMemo · มันบอกตำแหน่งของ อาร์เรย์ที่ใส่ไม่ครบ ให้เลย ไม่ต้องเดา

7 · กับดักที่ 3 — ใส่ให้ทุกอย่างแล้วช้าลง

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

useMemo หนึ่งบรรทัด ทำให้เกิดงานพวกนี้ ทุกครั้งที่วาด แม้ตอนที่มันคืนค่าเก่า:

1. สร้างก้อนฟังก์ชันใหม่ที่ส่งเข้าไป — ข้อนี้ผมพิสูจน์แล้วในหัวข้อ 3 (คอลัมน์ plain ที่ไต่จาก 1 ถึง 6) · useMemo แค่ไม่เรียกมัน แต่มันถูกสร้างไปแล้ว
2. สร้างอาร์เรย์ dependency ใหม่ — [a, b] คืออาร์เรย์ก้อนใหม่ทุกครั้ง
3. เทียบทีละช่องกับของรอบก่อน
4. จองที่เก็บค่าเก่าไว้ตลอดอายุของ component

ถ้าการคำนวณข้างในเป็นแค่ a + b — งานสี่ข้อข้างบนแพงกว่าการบวกเลขเอง แถมยังบวกภาระให้คนอ่านโค้ดอีกต่างหาก

8 · เรื่องที่สไลด์ไม่ได้บอก — 'use client' กับ hook สองตัวนี้

ใน App Router ของ Next.js ทุกไฟล์ใน app/ เป็น Server Component โดยปริยาย จนกว่าคุณจะเขียน 'use client' ไว้บรรทัดบนสุด
ตำราส่วนใหญ่จะสรุปสั้น ๆ ว่า "ใช้ hook = ต้องใส่ 'use client'" — ผมลองจริงแล้วไม่ตรงทั้งหมด จึงเขียนตามที่รันได้จริง

ผลรันจริงที่ 1 — useMemo ล้วน ๆ ไม่ error

ไฟล์นี้ ไม่มี 'use client':

// app/t75/oops/page.tsx
import { useMemo } from 'react';

export default function Page() {
  const total = useMemo(() => 1 + 1, []);
  return <p>total = {total}</p>;
}

$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:PORT/t75/oops
200

$ curl -s http://localhost:PORT/t75/oops | (ตัดแท็กออก)
Create Next App total = 2

$ npx next build
├ ○ /t75/oops          ← ○ (Static) prerendered as static content

ผ่านฉลุย ไม่มี error สักตัว · เหตุผลอยู่ในตัว React เอง — ผมเปิดดูรายการที่ build ฝั่ง server ของ React 19.2.8 ส่งออกมา:

$ node -e "console.log(Object.keys(require('./node_modules/react/cjs/react.react-server.development.js')).sort().join(' '))"

Children Fragment Profiler StrictMode Suspense
__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE cache cacheSignal
captureOwnerStack cloneElement createElement createRef forwardRef isValidElement
lazy memo use useCallback useDebugValue useId useMemo version

useCallback กับ useMemo อยู่ในรายการ ส่วน useState · useEffect ไม่อยู่

ผลรันจริงที่ 2 — พอเติม useState เข้าไป พังทันที

ไฟล์เดิม เติม useState หนึ่งบรรทัด ยังไม่ใส่ 'use client':

import { useMemo, useState } from 'react';

export default function Page() {
  const [n] = useState(2);
  const total = useMemo(() => n + 1, [n]);
  return <p>total = {total}</p>;
}

เปิดหน้านั้นได้ HTTP 500 พร้อมข้อความนี้ (ก็อปมาทั้งดุ้น):

./app/t75/oops2/page.tsx:1:19
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 { useMemo, useState } from 'react';
    |                   ^^^^^^^^
  2 |
  3 | export default function Page() {
  4 |   const [n] = useState(2);

Ecmascript file had an error

ดูตำแหน่งลูกศร ^^^^^^^^ ให้ดี — มันชี้ที่ useState ไม่ได้ชี้ที่ useMemo ที่อยู่ข้าง ๆ กัน
นี่คือหลักฐานตรง ๆ ว่าตัวที่ผิดกฎคือ useState ตัวเดียว

9 · แล้ว React Compiler ที่เขาว่ากันล่ะ

คุณจะได้ยินคนพูดบ่อยมากว่า "React 19 มี compiler แล้ว ไม่ต้องเขียน useMemo เองอีกต่อไป"
ผมไม่เดา — เปิดไฟล์คอนฟิกของโปรเจกต์นี้มากางเลย:

// next.config.ts — ทั้งไฟล์ ไม่ได้ตัดอะไรออก
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

$ ls node_modules | grep -i react-compiler
(ไม่มีอะไรออกมา — ไม่ได้ติดตั้ง)

10 · ภารกิจ — พิสูจน์ด้วยตัวนับ ไม่ใช่ด้วยความรู้สึก

// ข้อ 4 — ใส่ useCallback อย่างเดียว ลูกไม่ได้ห่อ memo
##### A · กด +1 ของ CallbackDemo สองครั้ง #####
[ChildPlain] วาดใหม่ครั้งที่ 3
[ChildPlain] วาดใหม่ครั้งที่ 4
[ChildPlain] วาดใหม่ครั้งที่ 5
[ChildPlain] วาดใหม่ครั้งที่ 6      ← ยังเดินอยู่

// ข้อ 5 — ลูกอีกตัวที่ห่อ memo ในหน้าเดียวกัน กดปุ่มเดียวกัน
[ChildMemo] วาดใหม่ครั้งที่ 1
[ChildMemo] วาดใหม่ครั้งที่ 2       ← หยุดตั้งแต่ตอนโหลดหน้า ไม่ขยับอีกเลย

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

อ้างอิง

• React — useMemo — อ่านหัวข้อ Should you add useMemo everywhere? ซึ่งเป็นหัวข้อที่ทีม React เขียนเองเพื่อบอกว่า อย่า · แล้วเลื่อนต่อไปที่ Troubleshooting → My calculation runs twice on every re-render ถ้าอยากรู้ที่มาของ log ซ้ำสองบรรทัดที่เห็นในบทนี้
• React — useCallback — อ่านหัวข้อ Skipping re-rendering of components ให้จบ เพราะมันเขียนตรง ๆ ว่าต้องใช้คู่กับ memo ถึงจะเกิดผล — ตรงกับที่ console ในหัวข้อ 5 ของบทนี้แสดง · ในหน้าเดียวกันมีบรรทัดที่บอกว่า useCallback(fn, deps) เท่ากับ useMemo(() => fn, deps)
• React — memo — อ่านหัวข้อ Caveats ที่เตือนว่ามันไม่ได้การันตีว่าจะไม่วาดใหม่ (React ยังมีสิทธิ์วาดใหม่ได้ในบางกรณี) — เป็นเหตุผลที่ห้ามใช้ memo แทนการแก้ตรรกะที่ผิด
• Next.js — 'use client' — ลิงก์นี้คือลิงก์เดียวกับที่โผล่ใน error ที่ผมก็อปมาในหัวข้อ 8 · อ่านย่อหน้าแรกที่อธิบายว่ามันขีดเส้นแบ่ง server/client ตรงไหน แล้วดูตัวอย่างที่บอกว่า directive ต้องอยู่บรรทัดบนสุดของไฟล์ เหนือ import ทุกตัว
• MDN — Object.is() — อ่านตาราง Description · นี่คือฟังก์ชันที่ React ใช้เทียบ dependency ทีละช่อง ลองสังเกตว่ามันไม่มีทางบอกได้ว่า object สองก้อน "หน้าตาเหมือนกัน" — บอกได้แค่ "เป็นก้อนเดียวกัน"