为何useEffect(someFunc,[])写法不符合规范？明明可正常运行

首先得明确React对useEffect第一个参数的要求：它需要是一个副作用函数——这个函数会在组件挂载/更新时执行，并且可以选择性返回一个清理函数，用于在组件卸载或下一次effect执行前清理副作用。

你提到的两种写法虽然表面上都能运行，但直接传someFunc的写法存在几个关键问题：

• 意外的清理逻辑：如果someFunc本身返回了一个函数，React会自动将这个返回函数当作清理函数执行，这大概率不是你想要的结果。举个例子：如果someFunc是一个订阅数据的函数，内部返回了取消订阅的方法，那直接把它传给useEffect后，React会在组件卸载时调用这个取消订阅的方法——但如果你本来只是想执行订阅，不需要自动清理（或者想手动控制清理逻辑），这就会导致意外的行为。而用箭头函数包裹的写法，只有你主动在箭头函数里return清理函数时，才会触发清理逻辑，完全可控。

• 依赖检测失效：ESLint的react-hooks/exhaustive-deps规则会检查effect函数内部用到的依赖项，确保它们被正确加入依赖数组。但如果你直接传递someFunc，这个规则只会检查someFunc本身是否在依赖数组里，而不会检查someFunc内部依赖的变量/Props。比如someFunc依赖组件的state count，但你把someFunc直接传给useEffect且依赖数组为空，ESLint不会提醒你要把count加入依赖，最终导致someFunc始终使用旧的count值，出现过时闭包问题。而箭头函数包裹的写法，ESLint能准确检测到箭头函数内调用someFunc时用到的所有依赖，给出正确的提示。

• 语义模糊性：useEffect的第一个参数语义上是“当前effect要执行的副作用逻辑”，用箭头函数包裹能清晰表达“这段逻辑是在effect中执行的”。直接传外部函数的话，其他开发者可能会误解这个函数是专门为effect设计的，或者不清楚它在effect中的具体执行逻辑，增加了代码维护的成本。

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