Điều gì khiến một component React re-render? Làm sao giảm re-render thừa?

Một component render lại khi:

• State của chính nó đổi (setState/useState/useReducer).
• Cha render lại — mặc định React render toàn bộ cây con, bất kể props có đổi hay không. Điểm hay hiểu nhầm: "props đổi" không phải trigger độc lập — con render vì cha render.
• Context nó subscribe đổi value.

Re-render không đồng nghĩa cập nhật DOM (React diff rồi chỉ commit phần khác), nhưng render thừa trên cây lớn vẫn tốn CPU. Cách giảm, theo thứ tự ưu tiên:

• Đưa state xuống thấp (colocation): state chỉ dùng cho ô search thì đặt trong component search, đừng đặt ở page — mỗi phím gõ khỏi render cả trang.
• Children/composition pattern: component nhận phần tĩnh qua children thì khi state của nó đổi, children (element đã tạo từ cha) không render lại.
• Tách context theo tần suất thay đổi (theme riêng, user riêng) để consumer không bị render bởi giá trị nó không dùng.
• React.memo cho component con nặng + useMemo/useCallback giữ reference props ổn định. React Compiler tự động hóa phần lớn việc memo này.

Nguyên tắc: đo trước bằng React DevTools Profiler, chỉ tối ưu chỗ re-render gây chậm thật.