useCallback hook dùng để làm gì? Khác gì useMemo?

useCallback memoize function để giữ stable reference giữa renders.

Dùng khi truyền callback xuống child component được wrap bởi React.memo, hoặc khi function là dependency của useEffect.

tsx

const Parent = () => {
  const [count, setCount] = useState(0)

  // không dùng useCallback: handleClick mới mỗi render → Child luôn re-render
  // dùng useCallback: reference ổn định → Child skip re-render nếu props khác không đổi
  const handleClick = useCallback(() => {
    console.log('clicked')
  }, []) // deps rỗng vì không dùng state/props trong fn

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Parent count: {count}</button>
      <MemoChild onClick={handleClick} />
    </>
  )
}

const MemoChild = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Child render')
  return <button onClick={onClick}>Child</button>
})

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

Mở danh sách React