babel-plugin-react-no-hook-dependency

A babel plugin to automagically add the deps array to your hook calls.

Examples

Adding dependency array to useMemo call

In

function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  });
  return <></>;
}

Out

function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, [state]);
  return <></>;
}

Leaving hook invocation untouched when a deps array is provided

In

function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, [state]);
  return <></>;
}

Out

function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, [state]);
  return <></>;
}

Using a hook with no deps array

In

function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, undefined);
  return <></>;
}

Out

function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  });
  return <></>;
}

Install

Using NPM:

npm install --save-dev babel-plugin-react-no-hook-dependency

Using yarn:

yarn add babel-plugin-react-no-hook-dependency --dev