React Hook useMemo was passed a dependency list that is not an array literal

Viewed 554

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.

0 Answers
Related