是否存在可检测useEffect仅包含return语句的ESLint规则？

首先明确你贴的这段代码的问题：
useEffect(() => { return doSomethingUseful() }, []) 里的return doSomethingUseful()会立刻执行doSomethingUseful，然后把它的返回值当作清理函数使用——如果返回的不是函数，这个return完全无意义；就算是函数，逻辑也完全拧了：本该是组件挂载时执行的副作用，变成了先执行一次，再把返回的函数当卸载/依赖更新时的清理逻辑，完全违背useEffect的设计初衷。

现有ESLint规则的可用选项 #

• react-hooks/exhaustive-deps间接提示：这个规则主要检查依赖项，但如果doSomethingUseful是外部函数，它会提示你把它加入依赖数组，这会倒逼你注意到这段代码的怪异之处，但它不是专门检测这种模式的规则。
• no-useless-return基础规则：如果doSomethingUseful()返回的不是函数，这个return属于无意义返回，该规则会标记它。但如果返回的是函数，这条规则就失效了，覆盖场景不全。

精准检测的自定义规则 #

如果需要精准捕捉这种错误写法，可以写个简单的自定义ESLint规则，核心逻辑是识别useEffect调用，然后检查它的回调函数体是否仅包含一条return语句，且return的是函数调用表达式。

核心代码示例：

module.exports = {
  create(context) {
    return {
      CallExpression(node) {
        if (node.callee.name !== 'useEffect' || node.arguments.length === 0) return;
        const callback = node.arguments[0];
        if (!['ArrowFunctionExpression', 'FunctionExpression'].includes(callback.type)) return;
        
        const body = callback.body;
        if (body.type === 'ReturnStatement' && body.argument?.type === 'CallExpression') {
          context.report({
            node,
            message: 'useEffect回调不应仅包含return式函数调用，这会混淆副作用与清理逻辑'
          });
        }
      }
    };
  }
};

临时替代方案（无需编写自定义规则） #

如果暂时不想开发自定义规则，可以用no-restricted-syntax规则精准匹配该模式，在ESLint配置中添加：

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "CallExpression[callee.name='useEffect'] > ArrowFunctionExpression[body.type='ReturnStatement'][body.argument.type='CallExpression']",
        "message": "useEffect回调不应仅包含return式函数调用，这会混淆副作用与清理逻辑"
      }
    ]
  }
}

这个选择器会直接命中你提到的代码结构，抛出错误提示。

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