Trước tiên đo lường, rồi sửa nguyên nhân thật — đừng rải useMemo khắp nơi theo phỏng đoán.
Dùng React DevTools Profiler (bật "Highlight updates when components render"). Nó cho thấy component nào đã render lại và vì sao (props thay đổi, state thay đổi, cha render, context thay đổi).
1. Props object/array/function mới mỗi render đánh bại React.memo:
// ❌ function mới + object mới mỗi render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ ổn định hóa chúng
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Giá trị Context được tạo lại mỗi render → mọi consumer render lại. Memoize value hoặc tách context.
3. State đặt quá cao. Hạ state xuống để ít component phụ thuộc vào nó thường là thắng lợi lớn nhất:
// di chuyển state input thay đổi nhanh XUỐNG component input
// để gõ phím không render lại cả trang
4. Công việc tốn kém trong render → bọc trong useMemo.
Render lại thường rẻ — React nhanh. Hầu hết "tối ưu" thêm phức tạp mà không lợi ích đo được. Ưu tiên sửa cấu trúc (đặt state cục bộ, virtualization danh sách cho hàng nghìn hàng) hơn rải memo. Tối ưu các điểm nóng cụ thể mà profiler tiết lộ, và đo lại để xác nhận sửa chữa thực sự có ích.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ