ReactuseMemo memoize kết quả tính toán tốn kém, chỉ tính lại khi dependencies thay đổi.
- Dùng khi có tính toán expensive mà không muốn chạy lại mỗi render, hoặc cần stable object reference.
- Không nên dùng quá mức vì có overhead riêng.
tsx
const ProductList = ({ products, filter }: Props) => {
// tính toán chỉ chạy lại khi products hoặc filter thay đổi
const filtered = useMemo(
() => products.filter(p => p.category === filter),
[products, filter]
)
return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}useMemo memoizes the result of an expensive computation, recalculating only when dependencies change.
- Use it when a calculation is costly and you want to skip it on every render, or you need a stable object reference for an effect or React.memo prop.
- Do not overuse it — memoization has its own overhead.
tsx
const ProductList = ({ products, filter }: Props) => {
// recalculates only when products or filter changes
const filtered = useMemo(
() => products.filter(p => p.category === filter),
[products, filter]
)
return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}