PerformanceCó.
Cả hai đều không miễn phí: mỗi hook thêm một entry vào bộ nhớ của component, thêm mảng dependency phải tạo và so sánh mỗi lần render, và giữ giá trị cũ sống lâu hơn cần thiết trong bộ nhớ.
// worse than doing nothing: the computation is cheaper than the bookkeeping
const total = useMemo(() => price * qty, [price, qty])
const label = useMemo(() => `${first} ${last}`, [first, last])Ba kiểu dùng sai hay gặp:
- Memo hoá phép tính rẻ — cộng, nối chuỗi, map trên 10 phần tử. Chi phí quản lý lớn hơn chi phí tính.
- Dependency là tham chiếu luôn đổi — useMemo(..., [options]) với options là object literal từ cha: cache không bao giờ trúng, chỉ tốn thêm.
- useCallback cho hàm truyền vào component không memo — con vẫn render lại mỗi lần, ổn định tham chiếu chẳng để làm gì.
Dùng khi có lý do rõ: phép tính thật sự nặng (lọc/sắp xếp danh sách lớn), giữ tham chiếu ổn định cho memo con hoặc cho dependency của useEffect, hoặc giữ danh tính của object đưa vào context value. Nguyên tắc: đo trước bằng Profiler, memo hoá sau.