Khi nào nên sử dụng useMemo, useCallback và React.memo để tối ưu hiệu năng React?

Question

Bộ ba công cụ memoization trong React:
- **`React.memo`**: Higher-Order Component (HOC) ngăn component con render lại nếu `props` đầu vào không thay đổi.
- **`useMemo`**: Caching kết quả tính toán đắt đỏ (expensive calculations) giữa các lần render.
- **`useCallback`**: Caching định nghĩa hàm (funct

Accepted Answer

Bộ ba công cụ memoization trong React:
- **`React.memo`**: Higher-Order Component (HOC) ngăn component con render lại nếu `props` đầu vào không thay đổi.
- **`useMemo`**: Caching kết quả tính toán đắt đỏ (expensive calculations) giữa các lần render.
- **`useCallback`**: Caching định nghĩa hàm (function reference) giữa các lần render để tránh tạo hàm mới làm ngắt `React.memo` của component con.

**Lưu ý**: Đừng lạm dụng cho các hàm/tính toán quá đơn giản, vì chi phí lưu trữ dependency array và so sánh bộ nhớ còn tốn kém hơn việc render lại thông thường.

Khi nào nên sử dụng useMemo, useCallback và React.memo để tối ưu hiệu năng React?

📌 Nội Dung Câu Hỏi

Đáp Án Chi Tiết Đã Bị Khóa

Câu Hỏi React Liên Quan

Virtual DOM và thuật toán Diffing trong React hoạt động như thế nào?

React Fiber Architecture là gì và cơ chế Concurrent Rendering trong React 18 giải quyết bài toán UI blocking như thế nào?