React StrictMode下避免window.open重复打开新标签的方法

问题场景 #

在React组件渲染时，需要通过window.open(url, "_blank")?.focus()打开新标签页，但开发环境中React.StrictMode会导致该操作被执行两次。希望在不关闭StrictMode的前提下解决这个问题。

之前的尝试：

1. 使用useMemo（无效，仍执行两次）

function MyComp() {
    useMemo(() => window.open(url, "_blank")?.focus(), []);
    return <div>...</div>;
}

2. 使用setTimeout（有效，但属于临时hack方案，并非理想选择）

function MyComp() {
    useEffect(() => {
        const id = setTimeout(() => window.open(url, "_blank")?.focus(), 10);
        return () => clearTimeout(id);
    });
    return <div>...</div>;
}

解决方案：使用useRef跟踪执行状态 #

利用useRef的持久化特性标记操作是否已执行，结合useEffect处理副作用，既能规避StrictMode下的重复执行，也符合React的副作用处理规范。

import { useEffect, useRef } from 'react';

function MyComp({ url }) {
  // 用ref记录是否已经执行过打开标签页的操作
  const hasTriggeredOpen = useRef(false);

  useEffect(() => {
    // 仅当未执行过时才触发操作
    if (!hasTriggeredOpen.current) {
      window.open(url, "_blank")?.focus();
      hasTriggeredOpen.current = true;
    }

    // 组件卸载时重置状态，避免后续重新挂载时无法触发新的打开操作
    return () => {
      hasTriggeredOpen.current = false;
    };
  }, [url]); // 依赖url参数，当url变化时允许重新触发打开逻辑

  return <div>...</div>;
}

方案说明 #

1. 为什么useMemo无效？
   useMemo的设计目的是缓存计算结果，而非处理副作用。在StrictMode下，React会重复调用useMemo的回调来检测是否存在不稳定的计算逻辑，因此无法避免重复执行window.open。

2. 为什么setTimeout方案不理想？
   该方案依赖延迟执行和清理函数来规避重复调用，本质是利用时间差“跳过”第一次执行，属于临时hack手段。延迟时间的设置具有不确定性，可能在某些场景下失效，同时不符合React副作用处理的最佳实践。

3. useRef方案的优势

• 严格遵循React副作用处理规范，使用useEffect管理副作用逻辑；
• 通过useRef的持久化特性，在StrictMode的挂载-卸载-重新挂载周期中准确跟踪执行状态；
• 当url参数变化时，能自动重新触发打开操作，逻辑更严谨可靠。

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