React Hook useCallback has a missing dependency warning, but the dependencies are present

Issue

I have the following:

props = {
onPositive: () => void;
closeFunc: () => void;
... about 5 more props
}

With the following hook:

const onPositive: () => void = useCallback(() => {
        props.positionFunc();
        props.closeFunc();
    }, [props.positionFunc, props.closeFunc]);

I am getting this warning:

React Hook useCallback has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback 

From what I understand in DependencyList I should include the dependencies the callback has, am I missing something?

I can turn-off the warning by putting [props] for DependencyList however I don’t think is needed?

Can somebody explain me why I should put props and not what I have?

Solution

The waring is pretty explicit about how to fix that:

However, ‘props’ will change when any prop changes, so the preferred
fix is to destructure the ‘props’ object outside of the useCallback
call and refer to those specific props inside useCallback

So the fix would be:

const {positionFunc, closeFunc} = props;

const onPositive: () => void = useCallback(() => {
       positionFunc();
       closeFunc();
    }, [positionFunc, closeFunc]);

Answered By – trixn

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0