Begrip: useCallback

De useCallback hook wordt gebruikt om een functie te "cachen" zodat deze niet opnieuw aangemaakt wordt bij elke render. Dit kan de performance verbeteren, vooral wanneer de functie doorgegeven wordt aan child componenten die afhankelijk zijn van referentiële gelijkheid.

De useCallback hook accepteert twee argumenten: de functie die je wilt cachen en een dependency array. Als een van de dependencies verandert, wordt de functie opnieuw aangemaakt.

import {type FunctionComponent, useState, useCallback} from 'react'

const Foo: FunctionComponent = () => {
  const [count, setCount] = useState(0)

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1)
  }, [])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}