ESLint规则react/no-multi-comp未检测含Hook的多组件问题

react/no-multi-comp 规则的 ignoreStateless 选项默认判断逻辑存在局限：它仅将类组件或显式使用 this.state 的组件视为“有状态组件”，而使用 useState、useEffect 等 React Hooks 的函数组件会被误判为无状态组件。这导致当你设置 ignoreStateless: true 时，同一个文件中存在多个带 Hooks 的组件不会触发规则错误，不符合你“每个文件仅允许一个有状态组件（含 Hooks）”的需求。

方案一：升级 eslint-plugin-react 到最新版本 #

新版 eslint-plugin-react 已更新 react/no-multi-comp 的判断逻辑，会将使用 Hooks 的函数组件识别为有状态组件。执行以下命令升级：

npm update eslint-plugin-react --save-dev
# 或使用 yarn
yarn upgrade eslint-plugin-react --dev

升级后重新运行 ESLint，即可验证规则是否正常生效。

方案二：自定义 ESLint 规则扩展判断逻辑 #

若升级后问题仍存在，可自定义规则补充原逻辑，识别使用 Hooks 的函数组件为有状态：

1. 在项目中创建自定义规则文件（如 eslint-rules/react-no-multi-comp-with-hooks.js）：

const baseRule = require('eslint-plugin-react/lib/rules/no-multi-comp');

module.exports = {
  ...baseRule,
  create(context) {
    const original = baseRule.create(context);
    const hookRegex = /use(State|Effect|Context|Reducer|Callback|Memo|Ref|ImperativeHandle|LayoutEffect|DebugValue)/;

    const checkAndReport = (node) => {
      const code = context.getSourceCode().getText(node);
      if (hookRegex.test(code)) {
        original[node.type](node);
      } else if (!context.options[0]?.ignoreStateless) {
        original[node.type](node);
      }
    };

    return {
      ...original,
      FunctionDeclaration: checkAndReport,
      ArrowFunctionExpression: checkAndReport
    };
  }
};

2. 在 .eslintrc.js 中配置使用自定义规则：

module.exports = {
  root: true,
  extends: ['airbnb-typescript', 'prettier', 'plugin:storybook/recommended'],
  plugins: ['import', 'react', 'react-hooks'],
  parserOptions: {
    project: './tsconfig.eslint.json',
    tsconfigRootDir: __dirname,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/no-multi-comp': 'off',
    './eslint-rules/react-no-multi-comp-with-hooks': ['error', { ignoreStateless: true }],
  },
};

方案三：简化规则策略（直接满足单文件单组件） #

如果你的核心需求是每个文件仅允许一个 React 组件（无论是否有状态），可直接关闭 ignoreStateless 选项：

rules: {
  'react/no-multi-comp': ['error', { ignoreStateless: false }],
},

此配置下，无论组件是否使用 Hooks，同一个文件中存在多个组件都会触发错误，直接达成“单文件单组件”的要求。

内容的提问来源于stack exchange，提问作者Bar Horing