Debugging: Bắt bệnh Performance với React Profiler

Junior Dev sửa lỗi bằng cách "đoán" và sửa thử. Senior Dev sửa lỗi bằng số liệu. Công cụ mạnh nhất trong tay bạn không phải console.log, mà là React Profiler.

1. Tại sao App chậm? (Đừng đoán!)

Bạn cảm thấy app bị lag khi gõ phím vào ô Search?

• Có thể do onChange chạy quá nhiều logic?
• Có thể do render lại list kết quả 1000 items?
• Có thể do... một cái icon nhỏ xíu render lại 100 lần?

Chỉ có Profiler mới trả lời được.

2. Flamegraph: Bản đồ nhiệt của App

Flamegraph (Biểu đồ lửa) cho bạn thấy bức tranh toàn cảnh của một lần render (Commit).

• Màu Xám: Component ngủ yên (Tốt).
• Màu Xanh: Render nhanh (Chấp nhận được).
• Màu Vàng: Render chậm (Thủ phạm!).

Cách đọc Flamegraph

Nhìn vào component màu vàng và hỏi: "Tại sao mày render?". Bật setting "Record why each component rendered" của DevTools để thấy câu trả lời:

• Props changed: [style] -> Bạn đang truyền inline object {}.
• Hooks changed: [UserContext] -> Context thay đổi làm render cả cây.

3. Case Study: "The Invisible Render"

Một lỗi kinh điển: Bạn có một Timer update mỗi giây ở Header. Bạn phát hiện ra Toàn bộ trang web (bao gồm cả Footer, Sidebar, Content) đều chớp nháy re-render mỗi giây!

Profiler vạch trần:

• Timer gọi setState ở App root component.
• React render lại App.
• Tất cả con của App render lại theo dây chuyền.

Fix: Move State Down (Đưa state Timer xuống đúng component Clock) hoặc dùng React.memo cho các phần nặng.

4. Ranked Chart: Bảng xếp hạng tội phạm

Chuyển sang tab Ranked. Nó sẽ list ra các component tốn thời gian nhất. Nếu ProductItem chiếm 50ms và bạn render 10 cái -> Mất 500ms (Nửa giây đơ máy). -> Tối ưu ProductItem quan trọng gấp 100 lần tối ưu cái Footer.

Kết luận

Debugging Performance là quá trình khoa học:

1. Record tình huống lag.
2. Analyze tìm thanh màu vàng.
3. Optimize đúng chỗ đó.
4. Verify record lại xem đã xanh chưa.

Đừng tối ưu mù quáng!