[Feature Request] Warn for arrays resulting of .map() or .filter() in hook dependencies

[xiniria]

ESLint plugin react hooks version: 4.6.0

Steps To Reproduce

const MyComponent = () => {
  const array = useMemo(() => ["banana", "apple"], []);

  const filteredArray = array.filter((element) => element !== "apple");

  useEffect(() => {
    console.log("If this is printed, array has changed");
  }, [array]);

  useEffect(() => {
    console.log("If this is printed, filteredArray has changed");
  }, [filteredArray]);

  const [counter, setCounter] = useState(0);

  return <button onClick={() => setCounter(counter + 1)}>Re-render</button>;
};

Feature request

The exhaustive-deps rule already warns for functions declared in the scope of a component, which will be re-declared at each render and thus be a problem if put inside the dependency array of a useEffect, useCallback or useMemo. I recently had a problem when applying the .filter() method on a memoized array, since the new resulting array is a new one at each render.

I was wondering if it would be possible to warn for this kind of issues as well, the same way functions declared inside the component are currently warned.

I don't have an exhaustive list of such methods (that return a new object from a given one) that would be warned, other than .filter() and .map(), perhaps people in the comments can propose others?

Where to do this

I have dived a little bit in the code of the package and found the scanForConstructions function (here) that seems to be the one that checks for the functions. If this is the way to do it, I could try to implement this other behaviour in this same function.

[Adarsha186]

Hi @xiniria, I would like to work on this, is this issue still open?

[josephsavona]

Thanks for posting. Our main solution for this is React Compiler, which will automatically memoize these values so that you don't have to manually memoize.