React.memo là gì và cách hoạt động?

React.memo là HOC memoize function component, skip re-render nếu props không thay đổi (shallow comparison).

Nên dùng khi component render expensive và props ít thay đổi.
Cần kết hợp với useCallback cho function props để có hiệu quả.

tsx

// Row chỉ re-render khi data hoặc onDelete thực sự thay đổi
const Row = React.memo(({ data, onDelete }: RowProps) => {
  console.log('Row render:', data.id)
  return (
    <tr>
      <td>{data.name}</td>
      <td><button onClick={() => onDelete(data.id)}>Delete</button></td>
    </tr>
  )
})

const Table = ({ items }: { items: Item[] }) => {
  // useCallback để giữ stable reference, tránh Row re-render mỗi khi Table render
  const handleDelete = useCallback((id: number) => {
    setItems(prev => prev.filter(i => i.id !== id))
  }, [])

  return (
    <table>
      {items.map(item => <Row key={item.id} data={item} onDelete={handleDelete} />)}
    </table>
  )
}

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

Mở danh sách React