React DevTools Profiler: Tìm re-render thừa trong 5 phút
Hướng dẫn sử dụng React DevTools Profiler để nhanh chóng phát hiện và fix các re-render không cần thiết trong ứng dụng React.
App React của bạn bị lag khi typing vào input? List component render lại toàn bộ khi chỉ 1 item thay đổi? React DevTools Profiler sẽ giúp bạn tìm ra vấn đề trong vài phút.
Setup Profiler
Cài React DevTools extension cho Chrome/Firefox. Mở DevTools → tab Profiler. Trước khi record, bật 2 settings quan trọng:
- Record why each component rendered: Cho biết lý do re-render (state change, props change, parent re-render)
- Highlight updates when components render: Highlight bằng border xanh/vàng/đỏ real-time
Cách đọc Flamegraph
Click Record → thao tác trên app → Stop. Profiler hiện flamegraph với mỗi component là một bar:
- Màu xám: Không render lại → tốt
- Màu xanh: Render nhanh (<1ms) → OK
- Màu vàng/cam: Render chậm → cần xem
- Màu đỏ: Render rất chậm → phải fix
Click vào component để xem why it rendered. Thường thấy: "The parent component rendered" — đây là dấu hiệu của unnecessary re-render.
Pattern phổ biến và cách fix
1. Object/Array reference mới mỗi render
// ❌ Tạo object mới mỗi render → child luôn re-render
function Parent() {
const [count, setCount] = useState(0);
return (
<Child
style={{ color: "red" }} {/* Object mới mỗi render */}
items={data.filter(x => x.active)} {/* Array mới mỗi render */}
onClick={() => doSomething()} {/* Function mới mỗi render */}
/>
);
}
// ✅ Stable references
function Parent() {
const [count, setCount] = useState(0);
const style = useMemo(() => ({ color: "red" }), []);
const activeItems = useMemo(
() => data.filter(x => x.active),
[data]
);
const handleClick = useCallback(() => doSomething(), []);
return (
<Child style={style} items={activeItems} onClick={handleClick} />
);
}
2. Context khiến toàn bộ tree re-render
Khi context value thay đổi, mọi consumer đều re-render, kể cả những component chỉ dùng 1 field trong context. Giải pháp: tách context nhỏ theo concern, hoặc dùng use hook với selector pattern trong React 19.
3. List không có proper key
Dùng index làm key khiến React phải re-render toàn bộ list khi thêm/xóa item. Luôn dùng unique ID.
React Compiler: Tương lai không cần memo
React Compiler (đã stable trong React 19) tự động memoize components và values. Nếu project đã dùng React 19, bật compiler lên:
// next.config.ts
const nextConfig = {
experimental: {
reactCompiler: true,
},
};
export default nextConfig;
Compiler sẽ tự thêm useMemo/useCallback ở những chỗ cần thiết. Tuy nhiên, vẫn nên dùng Profiler để verify — compiler không phải magic và có thể miss một số cases.
Quick wins ngay bây giờ
- Bật highlight renders, dùng app bình thường, xem component nào flash liên tục
- Wrap expensive child components bằng
React.memo()nếu chưa dùng compiler - Move state xuống gần component cần nó nhất (state colocation)
- Tách component lớn thành nhỏ hơn — component nhỏ = render scope nhỏ
- Dùng
useTransitioncho state updates không urgent (search, filter)
5 phút với Profiler có thể tiết kiệm hàng giờ debug. Làm nó thành thói quen sau mỗi feature lớn.
Admin
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!