Quartz 🪬

useCallback

1 min read

Hook useCallback sẽ giúp ghi nhớ hàm, đảm bảo rằng tham chiếu của nó sẽ không thay đổi sau mỗi lần render.

Usage

import { useEffect, useCallback } from "react"
 
function Logger({ data }) {
  const logData = useCallback(() => {
    console.log(data)
  }, [data])
 
  useEffect(() => {
    logData()
  }, [logData])
 
  return null
}

Có thể thấy, dependency được sử dụng là data. Nếu data thay đổi thì useCallback sẽ tạo ra một hàm mới và gán cho logData.

useMemo and useCallback

Cách sử dụng của hook useMemo và useCallback có điểm tương đồng nhau.

Tuy nhiên, bản chất của useMemo là trả về đối tượng được trả về trong callback truyền vào. Trong ví dụ bên dưới, giá trị của result là 1.

const value = useMemo(function () {
  return 1
}, [])

Trong khi đó, giá trị trả về của hook useCallback chính là callback truyền vào. Cụ thể, xét đoạn code sau:

const callback = useCallback(function () {
  return 1
}, [])

Trong đoạn code trên, giá trị của result là:

function() {
	return 1;
}

Resources