React render lại component khi props/state đổi; render lan xuống cây con → dễ dư thừa nếu không kiểm soát.
Công cụ:
- React.memo: bọc component để bỏ qua render nếu props không đổi (so sánh nông). Hữu ích cho item list, component con nặng.
- useCallback: ghi nhớ hàm để không tạo tham chiếu mới mỗi render — nếu không, memo con vẫn render lại vì prop callback "khác".
- useMemo: ghi nhớ giá trị/kết quả tính toán nặng giữa các render.
Lưu ý:
- Đừng lạm dụng — memoize cũng có chi phí; chỉ dùng khi có render nặng/list dài thực sự.
- Nguyên nhân re-render thường gặp: object/array/hàm inline làm prop, context đổi rộng, key không ổn định.
Hay hỏi: vì sao truyền () => {} inline làm hỏng React.memo của con.