react/exhaustive-deps Nursery
What it does
Verifies the list of dependencies for Hooks like useEffect
and similar.
Why is this bad?
React Hooks like useEffect
and similar require a list of dependencies to be passed as an argument. This list is used to determine when the effect should be re-run. If the list is missing or incomplete, the effect may run more often than necessary, or not at all.
Examples
Examples of incorrect code for this rule:
javascript
function MyComponent(props) {
useEffect(() => {
console.log(props.foo);
}, []);
// `props` is missing from the dependencies array
return <div />;
}
Examples of correct code for this rule:
javascript
function MyComponent(props) {
useEffect(() => {
console.log(props.foo);
}, [props]);
return <div />;
}
## References
- [Rule Source](https://github.com/oxc-project/oxc/blob/25ddb3519289dfe2a51e53b9b0c355d8ad950bbc/crates/oxc_linter/src/rules/react/exhaustive_deps.rs)