React中如何检测挂载后未被实际消费的Context？

不需要额外依赖，仅需对原生Context创建逻辑做轻量包装即可实现需求，生产环境可完全关闭无额外开销，核心原理是拦截React内部读取Context值的入口，标记消费状态，在子树渲染完成后做校验告警。

核心实现代码 #

import { createContext, useContext, useEffect, useRef } from 'react';

// 仅开发环境启用检测逻辑，生产环境直接返回原生Context
const IS_DEV = process.env.NODE_ENV === 'development';

export function createTrackedContext(defaultValue) {
  const NativeContext = createContext(defaultValue);
  // 生产环境直接返回原生Context，零侵入
  if (!IS_DEV) return NativeContext;

  const providerStack = [];
  const CHECK_DELAY = 16; // 等一帧，确保所有子组件完成渲染

  // 包装后的Provider组件
  const TrackedProvider = ({ value, children }) => {
    const instanceRef = useRef({
      consumed: false,
      name: NativeContext.displayName || 'AnonymousContext'
    });
    const valueRef = useRef(value);
    valueRef.current = value;

    useEffect(() => {
      const instance = instanceRef.current;
      providerStack.push(instance);
      
      // 子树全部渲染完成后检查消费状态
      const timer = setTimeout(() => {
        if (!instance.consumed) {
          console.warn(
            `[冗余Context告警] Context "${instance.name}" 已挂载但未被任何子组件消费，其内部初始化、数据请求逻辑均为无效开销。\n嵌套路径：${providerStack.map(i => i.name).join(' > ')}`
          );
        }
      }, CHECK_DELAY);

      return () => {
        clearTimeout(timer);
        const idx = providerStack.indexOf(instance);
        if (idx > -1) providerStack.splice(idx, 1);
      };
    }, []);

    return <NativeContext.Provider value={valueRef}>{children}</NativeContext.Provider>;
  };

  // 用Proxy包装Context对象，拦截React内部的Context值读取逻辑
  // React在调用useContext、渲染Consumer组件时，一定会读取Context上的_currentValue/_currentValue2属性
  const TrackedContext = new Proxy(NativeContext, {
    get(target, prop) {
      if (prop === '_currentValue' || prop === '_currentValue2') {
        // 触发读取即代表有组件消费当前Context，标记最近的Provider实例
        const activeProvider = providerStack[providerStack.length - 1];
        if (activeProvider) activeProvider.consumed = true;
        return target[prop].current;
      }
      if (prop === 'Provider') return TrackedProvider;
      return Reflect.get(target, prop);
    }
  });

  TrackedContext.useContext = () => useContext(TrackedContext);
  return TrackedContext;
}

使用方式 #

• 将项目中原本调用React.createContext的位置，全部替换为调用上述createTrackedContext即可，原有Context的使用逻辑完全不需要改动。
• 建议给每个Context显式设置displayName属性，告警时可以直接定位到具体Context，示例：

const AppConfigContext = createTrackedContext({});
AppConfigContext.displayName = 'AppConfigContext';

注意事项 #

• 检测逻辑仅在开发环境注入，生产环境会直接返回原生React Context，不会带来任何额外运行时开销。
• 该方案比Proxy包裹Context value的方案更精准：只要组件没有调用useContext/使用Consumer/声明contextType，就不会触发React内部的Context值读取，会被准确判定为未消费，不会出现“组件拿了Context实例但没访问内部属性”的误判。
• 如果项目中存在路由懒加载、异步挂载组件的场景，可以适当调大CHECK_DELAY的数值，避免延迟挂载的组件消费Context时触发误报。
• 告警信息中会打印当前Context的完整嵌套路径，对于多层Provider嵌套的场景，可以直接定位到哪一层Provider是冗余的，快速清理无效的初始化、数据请求逻辑。

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