React DevTools Profiler: Tìm re-render thừa trong 5 phút

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 useTransition cho 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.