Skip to content
small-rules

Use Exhaustive Dependencies

ErrorAuto-fixable
small-rules/use-exhaustive-dependencies

Enforce exhaustive and correct dependency specification in React hooks to prevent stale closures and unnecessary re-renders

Diagnostic Messages

addDependenciesArraySuggestion
Add dependencies array: {{dependencies}}
addDependencySuggestion
Add '{{name}}' to dependencies array
addMissingDependenciesSuggestion
Add missing dependencies to array
missingDependencies
This hook does not specify all its dependencies. Missing: {{names}}
missingDependenciesArray
This hook does not specify its dependencies array. Missing: {{deps}}
missingDependency
This hook does not specify its dependency on {{name}}.
removeDependencySuggestion
Remove '{{name}}' from dependencies array
unnecessaryDependency
This dependency {{name}} can be removed from the list.
unstableDependency
{{name}} changes on every re-render. Wrap the definition in useCallback() or useMemo() to stabilize it.

Configuration

This rule accepts one options object after the severity.

hooksOptional

Array of custom hook entries to check for exhaustive dependencies

Type
Array<{ closureIndex?: number; dependenciesIndex?: number; name: string; stableResult?: boolean | number | Array<number> | Array<string> }>
Default
reportMissingDependenciesArrayOptional

Report when the dependencies array is completely missing

Type
boolean
Default
true
reportUnnecessaryDependenciesOptional

Report when unnecessary dependencies are specified

Type
boolean
Default
true
reportUnnecessaryStableDependenciesOptional

Report when stable values (useRef, useState setter, etc.) are included as dependencies

Type
boolean
Default
false
resolveExpressionDependenciesOptional

Recognize expression dependencies like `value !== undefined` as covering a capture

Type
boolean
Default
true
{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/use-exhaustive-dependencies": [
      "error",
      {
        "hooks": [
          {
            "closureIndex": 0,
            "dependenciesIndex": 1,
            "name": "useCustomEffect",
            "stableResult": false
          }
        ],
        "reportMissingDependenciesArray": true,
        "reportUnnecessaryDependencies": true,
        "reportUnnecessaryStableDependencies": false,
        "resolveExpressionDependencies": true
      }
    ]
  }
}

Examples

Missing effect dependency
function Component() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log(count);
    }, []);
}

After auto-fix

function Component() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log(count);
    }, [count]);
}
Complete effect dependencies
function Component() {
    const a = 1;
    useEffect(() => {
        console.log(a);
    }, [a]);
}
Memoized Effect DependenciesRelatedOne requires deps present/correct; the other requires unstable deps be memoized.Require Named Effect FunctionsRelatedDependency correctness pairs with requiring readable named effect callbacks.