| name | code-review-performance-review |
| description | null |
Performance Review
Category: code-review · Status: 🟢 Active
When to use
Khi review hiệu năng: re-render, query, bundle, vòng lặp tốn kém.
Steps
- Re-render: prop/inline object/function tạo mới mỗi render; memo hóa hợp lý (
useMemo/useCallback/React.memo).
- Query: tránh N+1, over-fetch; phân trang; cache dữ liệu lặp lại.
- Bundle: import nặng/cả thư viện; dùng dynamic import, tree-shaking, tránh barrel file lớn.
- Vòng lặp: tránh O(n²) lồng nhau, tính lại trong loop; precompute/Map lookup.
- Đo trước khi tối ưu: profiler/DevTools/Lighthouse; tránh tối ưu sớm vô ích.
Template
const byId = useMemo(() => new Map(items.map((i) => [i.id, i])), [items]);
const Row = React.memo(({ item }: { item: Item }) => <li>{item.name}</li>);
Example
Good: đo bằng profiler, chỉ memo nơi cần, dynamic import phần nặng, tránh N+1.
Avoid: memo bừa khắp nơi, tối ưu khi chưa đo, import cả lib chỉ dùng 1 hàm.
Checklist