React将初始化useEffect移至空组件是否合理？有无潜在问题？

我开发了一个基于React和Redux的应用，需要通过useEffect完成一些初始化操作并更新Redux状态。原本将这些useEffect写在Main组件中，导致Main多次渲染（控制台输出'main rendered'3次）；后来我把这些初始化useEffect移至返回空标签<>的Init组件，Main仅渲染1次。这种做法看似可行，但我未见过类似用法，想咨询是否存在潜在问题，以及这类初始化操作的最佳实践是什么？

原代码示例 #

const Main = () => {
  //use redux

  //inits users, current user, history etc.
  useEffect(() => {...}, [...]);
  useEffect(() => {...}, [...]);
  ...

  console.log("main rendered");

  return <> {/*...all components*/} </>;
};

控制台输出'main rendered' 3次

修改后代码示例 #

const Main = () => {
  console.log("main rendered");

  return <>
    {/*...all components*/}
    <Init/>
  </>;
};

const Init = () => {
   //use redux

   //inits users, current user, history etc.
   useEffect(() => {...}, [...]);
   useEffect(() => {...}, [...]);
   ... 

  return <> </>;
}

控制台输出'main rendered' 1次

这种做法的潜在问题 #

• 逻辑分散，维护成本高：初始化逻辑被拆到单独的空组件里，后续接手的人可能找不到这块代码，排查问题时容易遗漏。
• 依赖关系不清晰：如果Init组件里用到了Main组件的props或者Redux状态，一旦依赖变更，Init的重渲染逻辑可能变得混乱，而且不容易追踪。
• 冗余组件开销：虽然返回的是空标签，但Init本质上还是一个React组件，会在虚拟DOM中生成对应的节点，属于冗余的组件实例，增加了微小的性能开销（大部分场景可忽略，但并非最优解）。

初始化操作的最佳实践 #

1. 优化Main组件内的useEffect依赖
   之前Main多次渲染的核心原因是useEffect更新Redux状态后，Main订阅的状态变化触发重渲染。可以检查每个useEffect的依赖数组，确保只在必要时执行；同时合并逻辑相近的初始化操作，减少状态更新次数——比如把多个独立请求合并成批量请求，或者用Redux的batch工具批量更新状态，减少重渲染触发次数。

2. 将初始化逻辑移至Redux层
   把初始化逻辑从组件层面抽离到Redux业务逻辑层：

   • 用createAsyncThunk定义初始化异步action，在应用启动时（比如App组件挂载时）dispatch这个action，一次性完成所有状态初始化。
   • 如果用Redux Saga，可以在saga中监听应用启动的action，执行初始化流程，组件只负责触发初始化，不处理具体逻辑，减少组件内的副作用。

3. 确保useEffect只执行一次
   如果仍要在组件内处理初始化，确保初始化useEffect的依赖数组为空[]，这样只会在组件挂载时执行一次。如果依赖了Redux的dispatch，直接从useDispatch获取即可（dispatch本身是稳定的，不会触发重渲染）。

4. 结合React Suspense做预加载（若适用）
   如果初始化涉及远程数据加载，可以用React.lazy和Suspense在组件渲染前完成数据初始化，避免渲染后再触发状态更新导致的重渲染。

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