คุณควรใช้ useMemo และ useCallback เมื่อใด และพวกมันแก้ไขปัญหาใด

Question

IT Interview Practice · Accepted Answer

ทั้งคู่จัดเก็บสิ่งของข้อมูลบนการ render เพื่อไม่ให้มันถูกคำนวณ/สร้างใหม่ทุกครั้ง:
- **`useMemo`** จัดเก็บ **ค่าที่คำนวณแล้ว**
- **`useCallback`** จัดเก็บ **identity ของฟังก์ชัน** (มันคือ `useMemo(() => fn, deps)`).

มันมีอยู่เพื่อหลีกเลี่ยง (a) การทำงานที่ใช้ต้นทุนสูงซ้ำแล้วซ้ำอีก และ (b) การทำลาย referential equality ที่ memoized children ต้องพึ่งพา

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## ทำไมเสถียรภาพของการอ้างอิงจึงมีความสำคัญ

โดยไม่มี `useCallback` `handleSelect` คือฟังก์ชันใหม่อย่างสมบูรณ์ในแต่ละการ render `React.memo(Grid)` จะเห็น prop "ใหม่" และยังคงทำการ render ใหม่ จึงทำให้การ memoization ล้มเหลว สิ่งเดียวกันนี้เกิดขึ้นกับอ็อบเจ็กต์ที่ส่งผ่านไปยัง memoized child หรือใช้ในอาร์เรย์ dependency ของ `useEffect`

## Trade-offs — อย่าใช้มากเกินไป

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoization ไม่ฟรี: มันใช้หน่วยความจำบวกการเปรียบเทียบ dependency บน **render ทุกครั้ง**
- Dependency array ที่ผิด/หายไปให้คุณ **ค่าเก่า** — ข้อบกพร่องที่พบได้บ่อยที่สุด
- Memoize เฉพาะเมื่อคุณวัดปัญหาจริง (การคำนวณที่มีต้นทุนสูง หรือ memoized child ที่ render เกินไป) `useMemo`/`useCallback` ในทุกที่เพิ่มเสียงรบกวนและอาจช้าลงได้ (Compiler ของ React 19 สามารถ auto-memoize ได้ ลดความจำเป็น)

ทำไมเสถียรภาพของการอ้างอิงจึงมีความสำคัญ

Trade-offs — อย่าใช้มากเกินไป

คำถามที่เกี่ยวข้อง