为何该简易React组件出现额外渲染及useEffect重复执行？

问题背景 #

组件代码 #

export const App = () => {
  return <Child />;
};

const Child = () => {
  console.log("RENDER");

  useEffect(() => {
    console.log("EFFECT");
  }, []);

  console.log("RETURN");

  return <div>Hello world</div>;
};

实际控制台输出 #

RENDER
RETURN
RENDER
RETURN
EFFECT
EFFECT

预期控制台输出 #

RENDER
RETURN
EFFECT

疑问 #

1. 为何useEffect触发前组件会完整渲染两次？
2. 为何effect会执行两次？

原因解析 #

这是React 18版本**开发环境下Strict Mode（严格模式）**的默认行为：

• 关于两次渲染：
  Strict Mode在开发阶段会对组件执行两次同步渲染，目的是提前排查依赖渲染次数的潜在bug（比如渲染阶段执行了非幂等的操作）。这两次渲染仅在内存中完成，不会在页面上产生视觉重复，只是会触发两次组件内的同步日志输出（即你看到的RENDER和RETURN各打印两次）。

• 关于两次Effect执行：
  Strict Mode在开发环境下会模拟组件挂载后立即卸载、再重新挂载的流程，因此空依赖的useEffect会执行两次（第一次挂载执行，卸载时因无清理函数无操作，第二次挂载再次执行）。这个机制是为了让开发者注意到未正确清理的副作用，避免真实场景中（比如组件卸载后再挂载）出现内存泄漏或异常。

注意：生产环境下Strict Mode不会触发这些重复执行逻辑，代码会按预期只渲染一次、Effect执行一次。如果需要在开发时临时关闭该行为，可以移除根组件外层的<StrictMode>标签。

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