Bug: react-hooks/exhaustive-deps not warning about unneeded dep

In the following example:

import ReactDOM from "react-dom";
import React, { useEffect } from "react";
import "./styles.css";

function Example() {
  const id = 123;
  const valueWhichMayChange = Math.random();
  useEffect(() => {
    return () => {
      //valueWhichMayChange === 0.5 &&
      document.getElementById(id).click(); // Just dummy functionality...
    };
  }, [id, valueWhichMayChange]); // Would expect unneeded "valueWhichMayChange" dep warning here.
  return <div id="123" />;
}

ReactDOM.render(<Example />, document.getElementById("root"));

react-hooks/exhaustive-deps doesn’t warn me about valueWhichMayChange unneeded dep, even though I have commented the line:

      ...
      //valueWhichMayChange === 0.5 &&
      ...

The same thing happens if I completely delete the line, no warning issued.

React version: 16.12

Steps To Reproduce

1. Open Codesanbox.
2. Look at line 13.

Link to code example: https://codesandbox.io/s/react-example-ey9pw?file=/index.js

The current behavior

No warning for valueWhichMayChange, though it is an unneeded dependency.

The expected behavior

Warning for valueWhichMayChange unneeded dependency.

Thanks a lot for your attention!

[aweary]

@tonix-tuft exactly, useLayoutEffect is just like useEffect. The only difference is the timing.

[aweary]

@tonix-tuft yes, useEffect is different in this respect. The purpose of useCallback and useMemo is to memoize some value based on a known set of inputs. If you have an unnecessary dependency, that memoized value will be re-created more more often than necessary.

As @vkurchatkin mentioned, this doesn’t apply to useEffect. It’s a valid use case to trigger an effect when some value changes, even if you don’t use that value. For example, you might want to clear some errors in a form when some input value changes

let [value, setValue] = useState("");
let [errors, setErrors] = useState(null);

// The input's value changed, clear any errors we reported earlier!
useEffect(() => {
  setErrors(null);
}, [input])

Hope that clears things up!