React Native中Pusher在useEffect依赖变更时未正确退订连接问题

你的核心问题是依赖项变更后，Pusher旧的订阅/连接未被彻底清除，导致事件回调被多次触发。以下是具体问题点和修复方案：

问题根源 #

1. 重复初始化Pusher单例：你每次调用socket()都执行pusher.init()，但Pusher.getInstance()返回的是全局单例，重复初始化会保留旧的连接状态和事件监听，导致旧回调无法被彻底移除。
2. 异步清理函数未被等待：React不会等待useEffect的异步清理函数执行完成，当依赖项变更时，新的连接逻辑可能已经启动，而旧的清理还未完成，造成新旧连接并存。
3. 回调泄漏：即使执行了unsubscribe，旧的onEvent回调可能仍然绑定在单例实例上，导致后续事件触发时多个回调同时执行。

修复代码 #

import React, { useEffect, createContext } from 'react';
import { Pusher } from '@pusher/pusher-websocket-react-native';

export const PusherContext = createContext();

// 全局单例仅初始化一次，避免重复配置
const pusher = Pusher.getInstance();
pusher.init({
  apiKey: 'api-key-here',
  cluster: 'eu',
});

export const PusherProvider = ({ children, dependency }) => {
  useEffect(() => {
    let isActive = false;

    const setupConnection = async () => {
      try {
        await pusher.connect();
        await pusher.subscribe({
          channelName: 'channel-name',
          onEvent: event => {
            // 过滤已清理后的无效回调
            if (!isActive) return;
            console.log('event called');
          },
        });
        isActive = true;
      } catch (err) {
        console.error('Pusher连接失败:', err);
      }
    };

    setupConnection();

    return () => {
      // 同步标记为无效，立即阻止旧回调执行
      isActive = false;
      // 异步执行清理逻辑，确保连接和订阅被彻底移除
      const cleanup = async () => {
        await pusher.unsubscribe({ channelName: 'channel-name' });
        await pusher.disconnect();
      };
      cleanup();
    };
  }, [dependency]);

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

关键修改说明 #

• 单例初始化复用：将pusher.init()移到组件外部，仅执行一次，避免重复配置导致的状态混乱。
• 活跃状态标记：用isActive变量在回调中过滤已清理的无效事件，防止旧回调继续触发。
• 清理逻辑拆分：先同步标记状态为无效，再异步执行断开/退订操作，确保新连接启动前，旧回调已被阻断。
• 错误捕获：添加try/catch处理连接过程中的异常，避免初始化失败导致的潜在问题。

额外验证建议 #

• 检查Pusher控制台的连接日志，确认依赖项变更时旧连接是否被正常关闭。
• 如果仍存在重复触发，可在重新订阅前主动调用pusher.unsubscribe（即使之前已执行），确保订阅状态被重置。

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