React 18如何检测Concurrent Mode（并发模式）是否激活？

要准确判断应用是否启用了并发渲染（即使用createRoot），而不仅仅依赖React版本，你可以通过以下两种实用方法实现：

方法一：通过根实例的内部属性检测 #

React 18中，createRoot创建的根实例会带有isConcurrent标记，传统ReactDOM.render创建的根则为false。你可以通过内部API获取根实例并判断该标记：

import * as ReactDOM from 'react-dom';

function isConcurrentModeEnabled(rootElement) {
  // 先确认是React 18及以上版本
  if (typeof ReactDOM.createRoot !== 'function') {
    return false;
  }

  // 获取已挂载的根实例（内部API）
  const root = ReactDOM._internalGetRoot(rootElement);
  return root?.isConcurrent === true;
}

使用时传入应用的根DOM元素即可得到结果。注意：_internalGetRoot是React内部API，未来版本可能调整，需在React版本更新时验证兼容性。

方法二：组件内部通过fiber树检测 #

如果无法直接获取根DOM元素，可在组件内部遍历React的fiber树到根节点，判断根实例的isConcurrent属性：

import { useEffect, useState } from 'react';
const ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

function useIsConcurrentMode() {
  const [isConcurrent, setIsConcurrent] = useState(false);

  useEffect(() => {
    if (typeof ReactDOM.createRoot !== 'function') {
      setIsConcurrent(false);
      return;
    }

    // 获取当前组件的fiber节点
    const currentFiber = ReactInternals.ReactCurrentOwner.current;
    if (!currentFiber) {
      setIsConcurrent(false);
      return;
    }

    // 遍历到根fiber
    let rootFiber = currentFiber;
    while (rootFiber.return) {
      rootFiber = rootFiber.return;
    }

    // 根fiber的stateNode就是根实例
    setIsConcurrent(rootFiber.stateNode?.isConcurrent === true);
  }, []);

  return isConcurrent;
}

在组件内调用这个Hook，就能得到当前应用是否处于并发模式的结果。同样，此方法依赖React内部实现，需留意版本兼容性。

注意事项 #

• 目前React官方未提供检测并发模式的公开API，上述方法均依赖内部实现，需在React大版本更新时做兼容性验证。
• 如果你的修复逻辑是针对特定并发场景（如渲染中断、状态更新优先级），也可以直接在对应场景中做判断，无需全局检测模式。

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