Reputation: 388
I have the counter component. I encapsulated the business logic with custom hook. Should I optimize functions by means useCallback
? If there is input onchange handler, will the situation be the same?
const increment = () => {
setCount(count + 1);
};
↓
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
Upvotes: 10
Views: 4374
Reputation: 81
Every function declared within a functional component’s scope should be memoized
or cached
with useCallback
. If it references to other variables or functions from the component scope it should list them in its dependency list
. Otherwise every prop/state
change will be recreating the function a behavior rarely used.
But remember to measure before optimizing. - Even the oficial documentation says to go easy on that.
Upvotes: 5
Reputation: 39340
Assuming that count and setCount came from const [count,setCount] = useState(0)
then you should use callback in the following way so increment function stays the same during the component's life cycle:
const increment = useCallback(() => setCount(count => count + 1),[]);
You don't need to re create increment when count changes because you can pass a callback to the state setter function.
Upvotes: 5