Remix应用无Outlet时组件重复渲染两次的原因排查

核心原因 #

这个现象是框架+React的默认正常行为，不是代码bug，触发来源为开发环境默认开启的React 18 严格模式（Strict Mode）

• Remix 开发环境默认自动启用React严格模式，该模式下React会在组件首次挂载阶段，主动执行两次渲染、一次卸载重挂载的流程，目的是提前检测组件中不规范的副作用写法，从根源上规避并发渲染下的潜在异常。
• 该重复渲染和路由、Outlet、子组件完全无关，哪怕清空所有子组件只保留根组件，根组件本身依然会被执行两次渲染检测，这也是移除Outlet后依然能看到两次日志的原因。
• 生产环境构建后，严格模式会自动关闭，双渲染现象会完全消失，不会影响线上运行表现。

状态异常的根因 #

组件状态异常本质是代码没有遵循React 18的副作用编写规范，严格模式只是提前把问题暴露了出来，常见不规范写法包括：

• 在组件函数体直接执行状态修改、全局变量修改、接口请求这类副作用逻辑，没有包裹在useEffect/useLayoutEffect中
• useEffect中注册了定时器、事件监听、外部订阅逻辑，但没有返回对应的清理函数
• 依赖项数组配置错误，导致副作用重复执行时出现状态冲突
  就算手动关闭严格模式，这些不规范写法在后续React并发渲染场景下依然可能触发偶发异常。

处理方案 #

• （推荐）优先修复不规范的副作用代码，给所有带订阅、定时器、事件绑定的effect添加清理逻辑，确保组件重复挂载时不会出现状态污染，这是长期适配React生态的最优方案。
• （仅临时调试用，不推荐长期关闭）如果需要临时关闭严格模式排查问题，可在项目根目录的remix.config.js中添加如下配置：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  // 保留原有其他配置项
  future: {
    v3_dev: {
      strictMode: false,
    },
  },
};

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