React Handbook

​x
}
function App () {
  const [count, setCount] = React.useState(1) 
  const handleIncrement = () => {
    setCount(previous => previous + 1)
  }
  
  return (
    <div>
      Count: {count}
      <br />
      <button onClick={handleIncrement}>
        Increment counter
      </button>
      <ButtonComponent count={count} />
    </div>
  )
}
​
function ButtonComponent ({ count }) {
  // re-creates when count changes
  const handleClickWithParams = React.useCallback(() => {
    console.log('Count is:', count)
  }, [count])
  
  // doesn't re-create and keeps the first value
  const handleClickWithoutParams = React.useCallback(() => {
    console.log('Wrong count is:', count)
  }, [])
  
  return (
    <div>
      <button onClick={handleClickWithParams} className="primary">
        Log current count
      </button>
      <button onClick={handleClickWithoutParams}>
        Log wrong count
      </button>
    </div>
  )

If you're working with a variable in a memoized function, don't forget to include it as a dependency. Forgetting to do so and leaving the dependency array empty will result in the function not being re-created and the value won't update.

Count: 1