Add option to ignore stable hooks from eslint-exhaustive-deps rule

[masad-frost]

Summary

I find myself using a bunch of custom ref-esque dependencies inside of useEffect. I'd like to ignore them from exhaustive deps errors just like the rule currently ignores useRef. My useEffect deps are usually decorated with eslint-ignores due to this, and non of my deps are linted anymore, including ones that are not coming from stable hooks.

It would be nice to be able to ignore some of these globally, per file, or on a line basis. One way to go about it is to either add a pattern for stable hooks.

Example:

/*eslint react-hooks/exhaustive-deps: ["error", { stableHooksPattern: "use(.*)Ref" }]*/

function MyComponent(props) {
  const myCustomRef = useMyCustomRef();
  const isMounted  = useIsMounted();

  useEffect(() => {
    console.log(myCustomRef.current);
    console.log(isMounted.current);
  }, []);
}

resolves #16873

Test Plan

I wrote a couple of tests for valid and invalid cases.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 178bdeb:

Sandbox	Source
React	Configuration

[masad-frost]

Another idea is to have a pattern for dependencies instead of their hook (i.e. stableDependenciesPattern). This allows us to also ignore things that don't come from hooks/function calls, such as props.

[sizebot]

Details of bundled changes.

Comparing: 50393dc...178bdeb

eslint-plugin-react-hooks

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
eslint-plugin-react-hooks.development.js	+0.5%	+0.2%	84.66 KB	85.05 KB	20.17 KB	20.22 KB	NODE_DEV
eslint-plugin-react-hooks.production.min.js	🔺+0.9%	🔺+0.4%	24.75 KB	24.96 KB	8.51 KB	8.54 KB	NODE_PROD

Size changes (experimental)

Generated by 🚫 dangerJS against 178bdeb

[sizebot]

Details of bundled changes.

Comparing: 50393dc...178bdeb

eslint-plugin-react-hooks

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
eslint-plugin-react-hooks.development.js	+0.5%	+0.2%	84.65 KB	85.04 KB	20.16 KB	20.21 KB	NODE_DEV
eslint-plugin-react-hooks.production.min.js	🔺+0.9%	🔺+0.4%	24.74 KB	24.95 KB	8.5 KB	8.53 KB	NODE_PROD

Size changes (stable)

Generated by 🚫 dangerJS against 178bdeb

[steveoh]

Is this going to be the path forward or what other options are there besides ignoring eslint exhaustive hooks?

[masad-frost]

I'm happy to resolve conflicts and pick it back up if maintainers want to. I think there might be forks that solve this problem.

[stale]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[hyphenized]

Any updates on this? I've been using a prefix since it's hard to distinguish between stable and non stable deps, but it has kind of made the code unnecessarily verbose 😕

[masad-frost]

No interest from maintainers. You can get the diff from this and create your own eslint rule. Honestly I've just been passing stable refs to my dep list 🤷

[masad-frost]

Closing, I'll use a fork. Thanks @facebook

[gdbd]

bump

[gburtini]

bump x2

[gdbd]

bump x3