PerformanceQuy trình thực tế:
1. Bật "Highlight updates when components render" trong tab Components. Thao tác thử vài lần — viền nhấp nháy chỉ ngay những vùng render lại ngoài mong đợi (gõ một ký tự mà cả sidebar nháy là dấu hiệu rõ).
2. Record một tương tác ở tab Profiler: bấm record, thực hiện đúng hành động chậm, dừng record.
3. Đọc flamegraph — chiều rộng là thời gian render của component và cây con. Thanh xám là component không render lần đó. Tìm thanh rộng bất thường.
4. Ranked chart — sắp xếp component theo thời gian render giảm dần, đi thẳng vào thủ phạm.
5. Bật "Record why each component rendered" trong Profiler settings — mỗi commit sẽ ghi rõ lý do: props thay đổi (prop nào), state thay đổi, hook thay đổi, hay parent rendered.
Lưu ý khi đọc số:
- Đo trên build production (profiling build) — development build chậm hơn nhiều lần, kết luận dễ sai.
- Bật CPU throttling 4x-6x để tái hiện máy yếu; nhiều vấn đề chỉ lộ ra ở đó.
- Nhiều commit rất nhanh liên tiếp thường xấu hơn một commit hơi lâu — chú ý cả biểu đồ commit ở trên.
Nếu React render nhanh mà trang vẫn giật, chuyển sang tab Performance của trình duyệt: nút thắt lúc đó nằm ở layout/paint hoặc script bên thứ ba, không phải ở React.