Below react hook I found from Recipe: useActions()
import { ActionCreator, ActionCreatorsMapObject, bindActionCreators } from 'redux';
import { useDispatch } from 'react-redux';
import { DependencyList, useMemo } from 'react';
function useActions<A extends ActionCreator<any>>(actions: A[]): A[];
function useActions<A extends ActionCreatorsMapObject>(actions: A): A;
function useActions(actions: any, deps?: DependencyList): any {
const dispatch = useDispatch();
return useMemo(
() => {
if (Array.isArray(actions)) {
return actions.map((a) => bindActionCreators(a, dispatch));
}
return bindActionCreators(actions, dispatch);
},
deps ? [dispatch, ...deps] : [dispatch],
);
}
export default useActions;
Got two eslint warnings:
React Hook useMemo was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.
React Hook useMemo has missing dependencies: 'actions' and 'dispatch'. Either include them or remove the dependency array.
Tried to add actions to dependencies of useMemo hook, but with no luck. The warnings are still there.
deps ? [dispatch, ...deps, ...actions] : [dispatch, ...actions],
This eslint rule confuses me, how can I make the dependencies correctly? I don't want to disable the react-hooks/exhaustive-deps rule.