Skip to content

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/5190b7fb280dcd15c6de81717c073b06a161ced6/crates/oxc_linter/src/rules/react/exhaustive_deps.rs)

Released under the MIT License.