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

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