react/exhaustive-deps Correctness

✅ This rule is turned on by default.

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:

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, []);
  // `props` is missing from the dependencies array
  return <div />;
}

Examples of correct code for this rule:

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
  }, [props]);
  return <div />;
}

Options

additionalHooks

{ type: string }

Optionally provide a regex of additional hooks to check.

Example:

{ "react/exhaustive-deps": ["error", { "additionalHooks": "useSpecialEffect" }] }

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/exhaustive-deps --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/exhaustive-deps": "error"
  }
}

References

• Rule Source