useMemo hook dùng để làm gì? Khi nào nên dùng?

useMemo 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>
}

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React