Ask questions[ESLint] Feedback for 'exhaustive-deps' lint rule
💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡
We analyzed the comments on this post to provide some guidance: https://github.com/facebook/react/issues/14920#issuecomment-471070149.
💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡💡
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.
yarn add eslint-plugin-react-hooks@next
# or
npm install eslint-plugin-react-hooks@next
ESLint config:
{
"plugins": ["react-hooks"],
// ...
"rules": {
"react-hooks/rules-of-hooks": 'error',
"react-hooks/exhaustive-deps": 'warn' // <--- THIS IS THE NEW RULE
}
}
Simple test case to verify the rule works:
function Foo(props) {
useEffect(() => {
console.log(props.name);
}, []); // <-- should error and offer autofix to [props.name]
}
If this new react-hooks/exhaustive-deps
lint rule fires for you but you think your code is correct, please post in this issue.
Please include these three 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.
The end goal of this thread is to find common scenarios and transform them into better docs and warnings. This can only happen when enough details are available. Drive-by comments with incomplete code snippets significantly drive down the quality of the discussion — to the point that it's not worth it.
Answer
questions
sylvainbaronnet
Hi,
Not sure what's wrong with my code here :
const [client, setClient] = useState(0);
useEffect(() => {
getClient().then(client => setClient(client));
}, ['client']);
I got React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked
Related questions