| name | performance-memoization |
| description | null |
Memoization
Category: performance · Status: 🟢 Active
When to use
Khi có tính toán nặng lặp lại, hoặc cần giữ tham chiếu ổn định cho props của component đã memo.
Steps
- Đo trước; KHÔNG tối ưu sớm — memo hoá vô tội vạ làm code rối và có thể chậm hơn.
useMemo cho giá trị tính toán tốn kém hoặc object/array cần ổn định tham chiếu.
useCallback cho hàm truyền xuống component đã memo hoặc làm dependency của effect.
memo cho component con render thường xuyên với props ổn định.
- Khai báo dependency array đầy đủ, đúng; tránh dependency thay đổi mỗi render.
Template
const sorted = useMemo(() => heavySort(items), [items]);
const onChange = useCallback((v: string) => setQuery(v), []);
const Child = memo(ChildBase);
Example
Good: memo hoá kết quả sort lớn, callback ổn định cho child memo.
Avoid: useMemo cho phép cộng đơn giản, useCallback khắp nơi không có child memo.
Checklist