React useEffect正确用法：条件逻辑位置与依赖告警处理

逻辑放在useEffect外部是否属于不良实践 #

这个问题没有非黑即白的答案，核心判断标准是你写的逻辑本身的性质，和它依赖的值更新频率没有直接关系：

• 如果你的条件逻辑是纯计算、派生值生成、渲染分支判断，放在useEffect外部的组件顶层不仅不是坏习惯，反而是官方推荐的正确写法。这类逻辑和渲染过程同步执行，不会产生外部副作用：比如根据state判断是返回加载占位还是正式内容、根据props计算要传递给子组件的衍生值，这类逻辑如果硬塞进useEffect，反而会导致组件先渲染一次旧值、等effect执行完再渲染新值，出现不必要的视觉闪烁和性能损耗。
• 如果你的条件逻辑包含副作用操作，比如发送网络请求、手动操作DOM、打埋点、调用非纯函数、执行setState更新状态，那直接写在组件顶层就是明确的错误写法，和习惯无关，会直接引发可复现的bug：组件每次重渲染都会完整执行一遍顶层代码，副作用直接写在这里会导致重复发请求、状态更新时序混乱，甚至触发无限重渲染循环。

你给出的第一种示例写法本身是中性的，问题只在于if/else块里的具体内容：如果块里是纯判断逻辑就没问题，如果是副作用逻辑就完全错误。

是否应该把条件逻辑全部放进useEffect #

当然不应该。useEffect的设计初衷就是专门用来承载和渲染过程解耦的副作用逻辑，不是用来装所有组件业务逻辑的筐。把纯计算、渲染判断硬塞进useEffect属于典型的误用。

useEffect的依赖项警告能不能直接忽略 #

绝大多数场景下绝对不能直接忽略。
这个警告不是ESLint没事找事的代码规范约束，是React官方用来帮你规避闭包过期、逻辑执行不符合预期这类bug的校验规则：当你在effect内部用到了组件作用域下的可变值（state、props、组件内定义的函数/变量）但没有加入依赖数组，就意味着当这些值更新时，effect不会重新执行，内部拿到的永远是上一次渲染的旧值，最后出现“状态变了但是逻辑没跟着更新”的诡异问题。

只有极其特殊的场景下你可以选择性忽略这个警告：比如你100%确定某段逻辑只需要在组件首次挂载时执行一次，且用到的值在组件全生命周期都不会发生变化，或者你通过useRef等方案手动保证了能拿到最新值。即便如此，也更推荐你通过调整逻辑写法补全依赖、或者用官方提供的useEvent这类工具解决问题，不要直接粗暴关闭校验，否则后续迭代很容易埋下难以排查的bug。

正确写法参考 #

function Home() {
  const { state } = useLocation();  
  const [validation, setValidation] = useState();
  const [mainData, setMainData] = useState();

  // 纯派生计算、渲染判断放顶层，完全合规
  const isEmpty = !mainData && validation?.passed;
  if (isEmpty) {
    return <EmptyTip />
  }

  useEffect(() => {
    // 副作用逻辑统一放在effect内
    fetchData(state.id).then(res => setMainData(res.data))
  }, [state.id]) // 补全对应依赖，不会触发警告

  return <MainContent data={mainData} />
}

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