How to fix Missing dependency in useEffect: recommended linter config not found in React

What this error means

The "react-hooks/exhaustive-deps" warning appears when ESLint's React Hooks plugin detects that you're using values inside hooks like useEffect, useMemo, or useCallback without including them in the dependency array. This rule is part of eslint-plugin-react-hooks, which is maintained by the React team to enforce the Rules of Hooks. When a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes, leading to stale closures. The component will continue using outdated values from previous renders, causing bugs that are often difficult to debug. The error message specifically about "recommended linter config not found" indicates that your ESLint configuration is either missing the React Hooks plugin entirely, or it's not properly configured to check for exhaustive dependencies in your effects and custom hooks.

Typical symptoms

• ESLint warning: "React Hook useEffect has a missing dependency"
• Effects using stale values from props or state
• Components not updating when expected
• Inconsistent behavior after state changes
• No linter warnings despite missing dependencies in hooks
• Custom hooks not being checked for dependency issues

Common causes

1. ESLint plugin eslint-plugin-react-hooks is not installed in the project
2. The exhaustive-deps rule is not enabled in ESLint configuration
3. Dependencies are omitted from useEffect, useMemo, or useCallback dependency arrays
4. Variables or functions used in hooks are declared outside without being memoized
5. Custom hooks are not configured in additionalHooks setting
6. ESLint configuration uses outdated format or incorrect plugin setup

How to fix "Missing dependency in useEffect: recommended linter config not found"

npm list eslint-plugin-react-hooks

npm install --save-dev eslint-plugin-react-hooks

yarn add --dev eslint-plugin-react-hooks

import reactHooks from 'eslint-plugin-react-hooks';

export default [
  {
    plugins: {
      'react-hooks': reactHooks
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn'
    }
  }
];

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

module.exports = {
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchUserData(userId).then(setData);
  }, []); // Missing dependency: userId
}

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchUserData(userId).then(setData);
  }, [userId]); // Dependency added
}

function MyComponent() {
  const handleClick = () => {
    console.log('clicked');
  };

  useEffect(() => {
    handleClick();
  }, [handleClick]); // handleClick recreated every render
}

import { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  useEffect(() => {
    handleClick();
  }, [handleClick]); // Stable reference
}

function MyComponent() {
  useEffect(() => {
    const handleClick = () => {
      console.log('clicked');
    };
    handleClick();
  }, []);
}

{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "(useMyCustomEffect|useMyDataFetcher)"
      }
    ]
  }
}

{
  "settings": {
    "react": {
      "additionalEffectHooks": ["useMyCustomEffect"]
    }
  }
}

npx eslint . --ext .js,.jsx,.ts,.tsx

Advanced notes

const options = useMemo(() => ({
  method: 'POST',
  headers: { 'Content-Type': 'application/json' }
}), []);

useEffect(() => {
  fetch('/api', options);
}, [options]);

Frequently asked questions

What does "react-hooks/exhaustive-deps" mean?

The "react-hooks/exhaustive-deps" warning appears when ESLint's React Hooks plugin detects that you're using values inside hooks like useEffect, useMemo, or useCallback without including them in the dependency array. This rule is part of eslint-plugin-react-hooks, which is maintained by the React team to enforce the Rules of Hooks. When a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes, leading to stale closures.

How do I fix "react-hooks/exhaustive-deps"?

This ESLint warning occurs when the exhaustive-deps rule is not properly configured or when dependencies used inside React hooks are not included in the dependency array, potentially causing stale closures and subtle bugs.

What causes "react-hooks/exhaustive-deps"?

ESLint plugin eslint-plugin-react-hooks is not installed in the project The exhaustive-deps rule is not enabled in ESLint configuration Dependencies are omitted from useEffect, useMemo, or useCallback dependency arrays

Is the "react-hooks/exhaustive-deps" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps

  React Hook useCallback has a missing dependency

  MEDIUM

• The dependency list of this hook is missing entries

  How to fix "The dependency list of this hook is missing entries" in React

  MEDIUM

• React Hook useEffect has a missing dependency:

  How to fix "React Hook useEffect has a missing dependency" in React

  MEDIUM

• Failed to load config from vite.config.ts: error:0308010C:digital envelope routines::unsupported

  Failed to load config from vite.config.ts with error:0308010C

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React exhaustive-deps rule documentation(Official Docs)
• 📖
  eslint-plugin-react-hooks npm package(Official Docs)
• 📖
  React Hooks ESLint plugin GitHub README(Official Docs)
• 📝
  LogRocket guide to exhaustive-deps warning
• 📝
  Max Rozen debugging useEffect with ESLint