Feature suggestion: Allow custom list of hooks to ignore on exhaustive-deps

The exhaustive-deps lint rule doesn’t require setters from useState, dispatch from useReducer, and refs from useRef in dependencies, because we know for sure those will never change. I’d like to be able to add additional custom hooks to that “safe list”. I understand this is potentially very dangerous, but we have a handful of hooks that simply wrap useRef with some logic. The returned result is essentially just a useRef result, so it’s perfectly safe to ignore as a dependency.

I’m imagining something like this in the eslint config:

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "safeHooks": "(useRefWrapper|useOtherRefWrapper)"
    }]
  }
}

Where useRefWrapper might look like so:

const useRefWrapper = () => {
  const ref = useRef();
  if (ref.current) {
    console.log('hi!');
  }
  return ref;
}

Does this seem like a reasonable option, assuming the documentation has a clear caveat mentioning the dangers? If so, I’m happy to work on implementation.

[dharkness]

While a simple regex would work for some custom hooks, there are many that return arrays and objects that could also benefit from this.

const [ value, setValue ] = useRecoilState(atom)
               ^^^^^^^^
const { loading, data, error, reload } = useQuery(...)
                              ^^^^^^

If the config allows any form of data, each hook could specify stable values with an array: numbers for element indices or strings for object properties. Not sure what you’d assign to hooks like useRefWrapper() that return a single value. An empty array?

"stableHooks": {
  "useRefWrapper": [],
  "useRecoilState": [1],
  "useQuery": ["reload"]
}

Another option would be to pack each hook into an array similar to how other ESLint rules are configured. The hook name would go into the first element followed by the stable array elements or object properties or by itself if its single return value is stable.

"stableHooks": [
  ["useRefWrapper"],
  ["useRecoilState", 1],
  ["useQuery", "reload"]
]

[polRk]

Another example:

const dispatch = useDispatch();

useEffect(() => dispatch(fetchUsers()), []);