React异步问题：使用React Context模拟单例能否解决FollowButton重复触发冲突？

将Hook逻辑迁移到Context Provider是完全合理的方案。
你当前遇到的问题根源是：每个调用useFollowUser的组件都会生成独立的isFollowing ref实例，互斥逻辑只对单个组件自身的调用生效，不同组件之间的锁不共享，自然拦不住多个相同userId的FollowButton同时发起请求。Context可以把互斥状态和follow逻辑提升到所有FollowButton共享的公共父层，完美解决跨实例的并发问题。

另外要注意你原有代码的隐藏问题：如果更新DB和GUI是异步操作，你没有等待异步操作完成就重置isFollowing.current，就算是单个按钮连续点击也会触发多次请求，所有方案都需要等待异步逻辑执行完成再释放锁。

不要用单个布尔值存互斥状态，改用Set存储正在执行关注操作的userId，支持同时对多个不同用户发起关注请求：

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

const FollowContext = createContext();

export function FollowProvider({ children }) {
  // 全局共享的pending状态集合
  const pendingFollowIds = useRef(new Set());

  const followUser = async (userId) => {
    // 同userId的重复请求直接拦截
    if (pendingFollowIds.current.has(userId)) return;

    pendingFollowIds.current.add(userId);
    try {
      // 原有更新DB和GUI的异步逻辑
      await updateFollowDB(userId);
      updateFollowGUI(userId, true);
    } finally {
      // 无论请求成功失败都释放锁，避免死锁
      pendingFollowIds.current.delete(userId);
    }
  };

  return (
    <FollowContext.Provider value={{ followUser }}>
      {children}
    </FollowContext.Provider>
  );
}

// 改造原有自定义Hook，保持对外接口不变
function useFollowUser() {
  return useContext(FollowContext).followUser;
}

你只需要在FollowButton组件的公共父层包裹FollowProvider，原有FollowButton的代码不需要做任何修改。

• 现有全局状态工具复用：如果项目已经接入Redux、Zustand、Jotai等全局状态管理库，不需要额外新增Context，直接把pending状态和follow逻辑存在全局store中即可，核心逻辑和Context方案完全一致，只是状态载体不同。
• 模块级单例锁：如果不想改动组件树结构，可以直接在Hook所在的模块顶层声明锁变量，ES模块的顶层变量天然是单例，所有调用该Hook的组件会共享同一个锁，实现成本极低：

// useFollowUser.js 模块顶层声明
const pendingFollowIds = new Set();

export function useFollowUser() {
  return async (userId) => {
    if (pendingFollowIds.has(userId)) return;
    pendingFollowIds.add(userId);
    try {
      await updateFollowDB(userId);
      updateFollowGUI(userId, true);
    } finally {
      pendingFollowIds.delete(userId);
    }
  };
}

• Promise缓存去重：可以缓存每个userId的关注请求Promise，相同userId的并发调用直接返回同一个Promise实例，既可以避免重复请求，还能让所有调用方拿到相同的请求结果：

const followRequestCache = new Map();

export function useFollowUser() {
  return async (userId) => {
    if (followRequestCache.has(userId)) {
      return followRequestCache.get(userId);
    }
    const request = updateFollowDB(userId)
      .then(() => updateFollowGUI(userId, true))
      .finally(() => followRequestCache.delete(userId));
    followRequestCache.set(userId, request);
    return request;
  };
}

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