如何禁用 React Hook “useCallback”不能在回调警告中调用？

Question

I have created a utility hook that allow updating the state of components as long as they are mounted.

to do so, I had to call useCallack inside the callback function of Array.map
this is my code

export const useSafeDispatches = (...dispatches) => {
    const mounted = useRef(false);
    useLayoutEffect(() => {
        mounted.current = true;
        return () => (mounted.current = false);
    }, []);

    return dispatches.map((dispatch) =>
        useCallback((...args) => (mounted.current ? dispatch(...args) : void 0), [dispatch])
    );
};

I am getting this error when I try to build React Hook "useCallback" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks React Hook "useCallback" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

Answer 1

The error message says exactly what you need to do, pull useCallback out of the map callback. Your callback depends on the value of mounted.current , so we make sure to include it in our list of dependencies -

export const useSafeDispatches = (...dispatches) => {
    
    const mounted = useRef(false);

    useLayoutEffect(() => {
        mounted.current = true;
        return () => (mounted.current = false);
    }, []);

    const safeDispatch = useCallback(dispatch =>
      (...args) => mounted.current ? dispatch(...args) : void 0
    , [mounted.current]);

    return dispatches.map(safeDispatch);
};