Đã bọc `React.memo` nhưng component vẫn render lại mỗi lần. Bạn kiểm tra những gì?

memo chỉ bỏ qua render khi mọi prop đều bằng nhau theo so sánh nông (Object.is từng prop). Danh sách kiểm tra theo thứ tự hay gặp:

1. Prop là tham chiếu mới mỗi lần — object/array/function literal, style={{...}}, data={rows.filter(...)}. Đây là nguyên nhân số một.
2. Prop children — <Card><Row /></Card> tạo element mới mỗi render, nên Card bọc memo vẫn render. Đây cũng là lý do memo hay vô dụng với component nhận children.
3. Component đọc context — memo không chặn cập nhật từ context; context đổi là render, bất kể props.
4. State nội bộ của chính nó đổi — memo chỉ chặn render do cha, không chặn render do state.

Trường hợp memo vô dụng ngay từ đầu: component nhận prop luôn đổi (vd value của một input đang gõ), hoặc component quá rẻ — chi phí so sánh props xấp xỉ chi phí render, thêm memo chỉ tốn thêm bộ nhớ.

Trước khi rải memo khắp nơi, thử đổi cấu trúc: đưa state xuống thấp hơn, hoặc truyền phần đắt tiền qua children để nó không nằm trong vùng render lại.