Should I memoize functions in custom hook?

Question

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]);

Sand

Answer 1

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.

Answer 2

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.