[ESLint] Feedback for 'exhaustive-deps' lint rule
Problem
Common Answers π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘ We analyzed the comments on this post to provide some guidance: https://github.com/facebook/react/issues/14920#issuecomment-471070149. π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘π‘ ---- What is this This is a new ESLint rule that verifies the list of dependencies for Hooks like `useEffect` and similar, protecting against the stale closure pitfalls. For most cases it has an autofix. We'll add more documentation over the next weeks. Installation [code block] ESLint config: [code block] Simple test case to verify the rule works: [code block] The lint rule complains but my code is fine! If this new `react-hooks/exhaustive-deps` lint rule fires for you but you think your code is correct, please post in this issue. ---- BEFORE YOU POST A COMMENT Please include these three things: 1. A CodeSandbox demonstrating a minimal code example that still expresses your intent (not "foo bar" but actual UI pattern you're implementing). 2. An explanation of the steps a user does and what you expect to see on the screen. 3. An explanation of the intended API of your Hook/component. But my case is simple, I don't want to include those things! It might be simple to you β but itβs not at all simple to us. If your comment doesn't include either of them (e.g. no CodeSandbox link), we will hide your comment because itβs very hard to track the discussion otherwise. Thank you for respecting everyoneβs time by including them.
Error Output
error and offer autofix to [props.name]
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: [ESLint] Feedback for 'exhaustive-deps' lint rule
[code block] I expect the lint to fix the deps into `[emails, props.onSubmit]`, but right now it always fix the deps into `[emails, props]`. > 1. A CodeSandbox demonstrating a minimal code example that still expresses your intent (not "foo bar" but actual UI pattern you're implementing). https://codesandbox.io/s/xpr69pllmz > 2. An explanation of the steps a user does and what you expect to see
Trust Score
3 verifications
- 1
I expect the lint to fix the deps into `[emails, props.onSubmit]`, but right now
I expect the lint to fix the deps into `[emails, props.onSubmit]`, but right now it always fix the deps into `[emails, props]`.
- 2
> 1. A CodeSandbox demonstrating a minimal code example that still expresses you
> 1. A CodeSandbox demonstrating a minimal code example that still expresses your intent (not "foo bar" but actual UI pattern you're implementing).
- 3
https://codesandbox.io/s/xpr69pllmz
https://codesandbox.io/s/xpr69pllmz
- 4
> 2. An explanation of the steps a user does and what you expect to see on the s
> 2. An explanation of the steps a user does and what you expect to see on the screen.
Validation
Resolved in facebook/react GitHub issue #14920. Community reactions: 2 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep