use-exhaustive-dependencies

Checks hook dependency arrays against the values captured by the callback.

Rule details Problem

By default, the rule checks these hooks:

• useEffect
• useLayoutEffect
• useInsertionEffect
• useCallback
• useMemo
• useImperativeHandle
• useSpring
• useSprings
• useTrail

It reports three broad problems:

• a dependency array is missing when the closure captures reactive values
• one or more dependencies are missing from the array
• a dependency is unnecessary or unstable

The rule skips values it treats as stable, including imports, function declarations, class declarations, literal const values, module-level const values, stable hook results like setters from useState and useReducer, and values from hooks configured with stableResult.

It can also suggest edits for adding or removing dependencies.

Path-based dependencies

When the closure reads user.profile.name, the rule can suggest the property path instead of only the root variable.

Examples

Incorrect

function UserProfile({ userId }) {
  useEffect(() => {
    fetchUser(userId);
  }, []);
}

Correct

function UserProfile({ userId }) {
  useEffect(() => {
    fetchUser(userId);
  }, [userId]);
}

Options

Option	Type	Default
hooks	HookEntry[]	[]
reportMissingDependenciesArray	boolean	true
reportUnnecessaryDependencies	boolean	true

Each custom hook entry can define:

Field	Type	Notes
name	string	Hook name to track.
closureIndex	number	Which argument contains the callback.
dependenciesIndex	number	Which argument contains the dependency array.
stableResult	boolean | number | number[] | string[]	Marks the whole result, tuple indices, or object keys as stable.

Related rules

require-named-effect-functionsPairs well with effect callback style checks

use-hook-at-top-levelChecks where hooks are called