Rails 7 + esbuild + React页面切换时出现闪烁问题

方案1：在Stimulus控制器的disconnect阶段清理React根实例 #

闪烁的核心原因之一是Turbo缓存页面时，React组件的DOM节点未被正确清理，导致导航回页面时旧组件残留与新渲染组件短暂重叠。在Stimulus控制器的disconnect方法中销毁React根实例，能确保页面缓存时DOM处于干净状态：

import { Controller } from "@hotwired/stimulus"
import React from "react";
import { createRoot } from "react-dom/client";
import UserEditPage from "../components/UserEditPage";

export default class extends Controller {
  connect() {
    this.root = createRoot(this.element);
    this.root.render(<UserEditPage />);
  }

  disconnect() {
    // 销毁React根实例，清理DOM
    this.root.unmount();
  }
}

这里直接使用this.element（Stimulus控制器绑定的DOM元素）代替ID查找，既符合Stimulus设计规范，也避免了全局ID冲突风险。

方案2：利用Turbo的缓存钩子提前清理组件 #

Turbo在缓存页面前会触发turbo:before-cache事件，我们可以在这个时机清理React组件，确保缓存的页面没有残留的React渲染内容：

import { Controller } from "@hotwired/stimulus"
import React from "react";
import { createRoot } from "react-dom/client";
import UserEditPage from "../components/UserEditPage";

export default class extends Controller {
  connect() {
    this.root = createRoot(this.element);
    this.root.render(<UserEditPage />);
    // 绑定Turbo缓存前的清理事件
    this.cacheCleanup = this.cleanupBeforeCache.bind(this);
    document.addEventListener("turbo:before-cache", this.cacheCleanup);
  }

  disconnect() {
    this.root.unmount();
    document.removeEventListener("turbo:before-cache", this.cacheCleanup);
  }

  cleanupBeforeCache() {
    this.root.unmount();
  }
}

该方案能确保Turbo缓存的页面是未渲染React组件的空白容器，导航回页面时Stimulus重新初始化渲染，不会出现新旧内容重叠的闪烁。

方案3：避免重复渲染已初始化的组件 #

如果同一个页面可能被Turbo多次加载，可以在connect阶段检查是否已存在React根实例，避免重复渲染：

import { Controller } from "@hotwired/stimulus"
import React from "react";
import { createRoot } from "react-dom/client";
import UserEditPage from "../components/UserEditPage";

export default class extends Controller {
  connect() {
    // 检查元素是否已有React根实例
    const existingRoot = this.element._reactRootContainer;
    if (existingRoot) {
      this.root = existingRoot._internalRoot;
      return;
    }
    this.root = createRoot(this.element);
    this.root.render(<UserEditPage />);
  }

  disconnect() {
    this.root.unmount();
  }
}

这种方式适合需要保留组件状态的场景，若无需保留状态，优先选择前两种方案，确保每次导航都有干净的渲染环境。

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