Khi nào nên dùng useMemo và useCallback, và chúng giải quyết vấn đề gì?

Question

Accepted Answer

Cả hai đều cache một thứ gì đó xuyên qua các lần render để nó không bị tính lại/tạo lại mỗi lần:
- **`useMemo`** cache một **giá trị đã tính toán**.
- **`useCallback`** cache **danh tính (identity) của một hàm** (nó chính là `useMemo(() => fn, deps)`).

Chúng tồn tại để tránh (a) lặp lại công việc tốn kém và (b) phá vỡ tính bằng nhau theo tham chiếu (referential equality) mà các component con đã được memo hóa dựa vào.

```jsx
function Table({ rows, onSelect }) {
  // (a) phép tính tốn kém — chỉ tính lại khi `rows` thay đổi
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) danh tính hàm ổn định — để một component con React.memo không re-render,
  //     và các effect phụ thuộc vào nó không chạy lại
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

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

## Tại sao tính ổn định theo tham chiếu lại quan trọng

Nếu không có `useCallback`, `handleSelect` là một hàm hoàn toàn mới ở mỗi lần render. Một `React.memo(Grid)` sẽ thấy một prop "mới" và vẫn re-render, làm vô hiệu việc memo hóa. Tương tự với một object truyền vào component con đã memo hóa hoặc được dùng trong mảng dependency của một `useEffect`.

## Đánh đổi — đừng lạm dụng chúng

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ vô nghĩa — phép cộng còn rẻ hơn việc memo hóa
```

- Memo hóa không miễn phí: nó tốn bộ nhớ cộng thêm một phép so sánh dependency ở **mỗi** lần render.
- Một mảng dependency sai/thiếu sẽ cho bạn **giá trị cũ (stale)** — lỗi phổ biến nhất.
- Chỉ memo hóa khi bạn đã đo được một vấn đề thực sự (một phép tính tốn kém, hoặc một component con đã memo hóa nhưng re-render quá nhiều). Việc đặt `useMemo`/`useCallback` ở khắp nơi một cách vội vàng làm tăng nhiễu và thậm chí có thể chậm hơn. (Compiler của React 19 có thể tự động memo hóa, giảm bớt nhu cầu này.)