ReactHai cách dùng Profiler:
- <Profiler> component: programmatic, log metrics trong production.
- React DevTools Profiler tab: UI flame chart, dùng khi develop.
3 metrics quan trọng:
| Metric | Ý nghĩa |
|---|---|
actualDuration | Thời gian render thực tế (đã trừ memoization skip) |
baseDuration | Thời gian render nếu không có memoization |
commitTime | Timestamp lúc commit DOM |
actualDuration << baseDuration → memoization (React.memo/useMemo) đang hoạt động tốt. actualDuration ≈ baseDuration → memoization không skip gì, có thể là vô ích hoặc shallow compare fail.
jsx
<Profiler id="OrderList" onRender={(id, phase, actualDuration, baseDuration) => {
// 16ms = 60fps budget — vượt là user thấy lag
if (actualDuration > 16) {
console.warn(`[${id}] ${phase} took ${actualDuration.toFixed(2)}ms`)
}
}}>
<OrderList orders={orders} />
</Profiler>Quy tắc tối ưu: Profile trước, optimize sau. DevTools Profiler flame chart màu cam/đỏ = component cần xem trước, đừng đoán bottleneck.