import { useState, useCallback } from 'react' const Component = () => { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log(count); }, []); return ( <div> <div onClick={() => setCount((prev) => prev + 1)}>Count: {count}</div> <div onClick={handleClick}>Log</div> </div> ); };

In this example, handleClick is created using useCallback with an empty dependencies array []. This means that the function will be created once when the component mounts and will not be updated when count changes.

Because of this, clicking the "Log" button will always output the value of count that was present during the first render (in this case 0), not the current value.

To ensure the function always has the current value of count, you should add count to the dependencies array:

const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

Alternatively, you can use the functional update form of setState with a callback to avoid unnecessary re-creations of the function.

Therefore, it is important to correctly specify dependencies in useCallback to avoid capturing stale values.