基于模块作用域的单例React Hook实现合规性咨询

问题背景 #

我想实现一种无需Context或第三方库的React Hook单例模式，自行编写了基于模块作用域singletonInstances的实现，目前运行正常，但担心不符合React规范，未来可能出现问题，希望得到资深开发者的反馈。

实现代码 #

import { useMemo } from "react";

type HookFunction<T, P extends any[]> = (...args: P) => T;

type SingletonInstances = Record<string, unknown>;

const singletonInstances: SingletonInstances = {};

export function useSingleton<T, P extends any[]>(
  hookFn: HookFunction<T, P>,
  ...args: P
) {
  const hookName = hookFn.name;

  return useMemo(() => {
    if (!singletonInstances[hookName]) {
      singletonInstances[hookName] = hookFn(...args);
    }
    return singletonInstances[hookName] as T;
  }, [...args]);
}

使用示例 #

import { useState } from "react";
import { useSingleton } from "./useSingleton";

function useSomeHook() {
  const [count, setCount] = useState(0);
  
  // hook的业务逻辑...
  
   return [count, setCount];
}

export default function useSome() {
  return useSingleton(useSomeHook);
}

方案存在的问题分析 #

1. 依赖函数名导致的冲突风险 #

当前实现用hookFn.name作为实例的唯一标识，但存在两个严重问题：

• 匿名函数/箭头函数：如果传入的是匿名函数或箭头函数，hookFn.name会是空字符串，导致所有这类hook共享同一个实例，完全不符合预期。
• 生产环境代码压缩：打包工具（如Webpack、Vite）在生产环境会压缩函数名，不同的hook可能被压缩成相同的名称（比如a、b），直接导致实例混淆。

2. 实例无法回收，易引发内存泄漏 #

模块作用域的singletonInstances是全局持久化的，只要应用不重启，里面的实例就不会被垃圾回收。如果你的hook包含订阅、定时器、DOM引用等资源，即使所有使用该hook的组件都卸载了，这些资源也不会被释放，长期运行会导致内存占用持续升高。

3. 参数更新不生效 #

useMemo的依赖是args，但实例一旦创建后，即使args发生变化，代码也不会重新调用hookFn生成新实例。这意味着如果你的hook依赖初始化参数，参数更新后无法触发实例更新，完全违背React的响应式设计逻辑。

4. 违反React Hook的设计预期 #

React的Hook设计是绑定组件渲染周期的，状态应该和组件树的挂载/卸载生命周期同步。而这个单例方案的状态完全脱离组件生命周期，比如组件卸载后状态仍然保留，再次挂载时直接复用旧状态，可能导致组件状态和实际业务场景脱节，增加调试难度。

5. 并发渲染下的潜在竞态风险 #

在React并发模式下，多个组件可能同时调用useSingleton，虽然useMemo在渲染阶段是同步执行的，但模块作用域的判断逻辑并非原子操作，极端情况下可能出现重复创建实例的问题。

改进建议 #

1. 改用自定义唯一标识替代函数名 #

允许用户传入一个自定义的key作为实例的唯一标识，避免函数名带来的冲突问题：

export function useSingleton<T, P extends any[]>(
  key: string, // 新增自定义key
  hookFn: HookFunction<T, P>,
  ...args: P
) {
  return useMemo(() => {
    if (!singletonInstances[key]) {
      singletonInstances[key] = hookFn(...args);
    }
    return singletonInstances[key] as T;
  }, [key, ...args]);
}

2. 添加实例销毁机制 #

结合useEffect和引用计数，当所有使用该单例的组件都卸载时，清除实例并释放资源：

const instanceRefCount: Record<string, number> = {};

export function useSingleton<T, P extends any[]>(
  key: string,
  hookFn: HookFunction<T, P>,
  ...args: P
) {
  const instance = useMemo(() => {
    if (!singletonInstances[key]) {
      singletonInstances[key] = hookFn(...args);
      instanceRefCount[key] = 0;
    }
    instanceRefCount[key]++;
    return singletonInstances[key] as T;
  }, [key, ...args]);

  useEffect(() => {
    return () => {
      instanceRefCount[key]--;
      if (instanceRefCount[key] === 0) {
        // 如果hook有销毁方法，调用它
        if (typeof (instance as any).destroy === 'function') {
          (instance as any).destroy();
        }
        delete singletonInstances[key];
        delete instanceRefCount[key];
      }
    };
  }, [key, instance]);

  return instance;
}

3. 支持参数更新时重建实例 #

如果需要在参数变化时更新实例，可以修改逻辑，当参数变化时先销毁旧实例，再创建新实例：

// 自行实现浅比较函数
function shallowEqual(a: any[], b: any[]) {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}

export function useSingleton<T, P extends any[]>(
  key: string,
  hookFn: HookFunction<T, P>,
  ...args: P
) {
  const prevArgsRef = useRef<P>();

  const instance = useMemo(() => {
    // 如果参数变化，销毁旧实例
    if (prevArgsRef.current && !shallowEqual(prevArgsRef.current, args)) {
      if (typeof (singletonInstances[key] as any).destroy === 'function') {
        (singletonInstances[key] as any).destroy();
      }
      delete singletonInstances[key];
    }
    prevArgsRef.current = args;

    if (!singletonInstances[key]) {
      singletonInstances[key] = hookFn(...args);
    }
    return singletonInstances[key] as T;
  }, [key, ...args]);

  // 省略销毁逻辑...
  return instance;
}

4. 明确使用场景，避免滥用 #

这种单例Hook只适合全局唯一且长期存在的资源（如全局状态管理、WebSocket连接），如果是组件级别的状态，完全没必要用单例，遵循React的组件状态隔离原则即可。

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