useCallback React hook이 유용한 지, 어떻게 사용하는지 알아보십시오!

하나의 React hook은 때때로 useCallback입니다.

import React, { useCallback } from 'react'

이 후크는 자식이 자주 다시 렌더링되는 구성 요소가 있고 콜백을 전달할 때 유용합니다.

import React, { useState, useCallback } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  const [otherCounter, setOtherCounter] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }
  const decrement = () => {
    setCount(count - 1)
  }
  const incrementOtherCounter = () => {
    setOtherCounter(otherCounter + 1)
  }

  return (
    <>
      Count: {count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={incrementOtherCounter}>incrementOtherCounter</button>
    </>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

여기서 문제는 카운터가 업데이트 될 때마다 모든 3 개의 함수가 다시 생성된다는 것입니다.

Set 데이터 구조를 인스턴스화하고 각 데이터 구조를 추가하여 이를 시각화 할 수 있습니다. 왜 세트? 고유 한 요소만 저장하기 때문에 우리의 경우 다른 (고유하게 인스턴스화 된) 함수를 의미합니다.

import React, { useState, useCallback } from 'react'

const functionsCounter = new Set()

const Counter = () => {
  const [count, setCount] = useState(0)
  const [otherCounter, setOtherCounter] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }
  const decrement = () => {
    setCount(count - 1)
  }
  const incrementOtherCounter = () => {
    setOtherCounter(otherCounter + 1)
  }

  functionsCounter.add(increment)
  functionsCounter.add(decrement)
  functionsCounter.add(incrementOtherCounter)

  alert(functionsCounter)

  return (
    <>
      Count: {count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={incrementOtherCounter}>incrementOtherCounter</button>
    </>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

이 코드를 사용해 보면 한 번에 3 씩 경고가 증가하는 것을 볼 수 있습니다.

대신 하나의 카운터를 증가 시키면 해당 카운터와 관련된 모든 함수를 다시 인스턴스화해야합니다.

다른 상태 값이 변경되지 않은 경우에는 변경된 값을 변경하지 않아야 합니다.

자, 대부분의 경우, 많은 다른 기능을 전달하지 않는 한 커다란 문제는 아닙니다. 관련 없는 모든 데이터가 변경되어 앱 성능에 큰 비용이 드는 것으로 나타났습니다.

그게 문제라면 useCallback을 사용할 수 있습니다.

const increment = (() => {
  setCount(count + 1)
})
const decrement = (() => {
  setCount(count - 1)
})
const incrementOtherCounter = (() => {
  setOtherCounter(otherCounter + 1)
})

const increment = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
  setOtherCounter(otherCounter + 1)
}, [otherCounter])

해당 배열을 useCallback()에 필요한 두 번째 매개 변수로 추가해야 합니다.

이제 카운터 중 하나를 클릭하려고 하면 변경된 상태와 관련된 함수 만 다시 인스턴스화 됩니다.