如何正确使用React SignalR Context的dependencies属性避免重复连接？

你的组件每次渲染都触发SignalR重连，核心问题可能出在两个地方：一是useSelector获取的整个session对象引用不稳定，导致组件无意义重渲染；二是每次渲染都生成新的URL字符串，可能触发了SignalRContext内部的重连逻辑，哪怕userId值没变化。

1. 精准获取userId，减少不必要渲染 #

别直接取整个session对象，改成只提取userId：

const userId = useSelector(state => sessionSelectors.session(state).userId);

这样只有userId真正变化时，组件才会重新渲染，避免父组件或其他无关state变化导致的无意义刷新。

2. 缓存SignalR连接URL #

每次渲染拼接URL都会生成新的字符串引用，哪怕内容完全一致，部分Context实现会将此判定为props变化并触发重连。用useMemo缓存URL，仅在userId或API地址变更时更新：

const signalRUrl = useMemo(() => `${config.apiAddr}/events?userId=${userId}`, [config.apiAddr, userId]);

3. 优化Provider的props传递 #

将缓存后的URL和稳定的userId依赖传入Provider：

return (
  <SignalRContext.Provider
    url={signalRUrl}
    withCredentials={true}
    dependencies={[userId]}
  >
    <ComponentUsingContext/>
  </SignalRContext.Provider>
);

额外排查点 #

• 检查sessionSelectors.session的实现：如果是自定义选择器，要确保它不会在session数据未变化时返回新的对象引用。推荐用reselect的createSelector，它默认会缓存结果，只有依赖的state字段变更时才会更新返回值的引用。
• 若以上修改后仍有问题，需确认SignalRContext内部是否真的仅根据dependencies判断是否重建连接。如果它的逻辑是任意props变化就重连，可能需要用useMemo缓存所有props对象，但正规的Context实现都会尊重dependencies的配置。

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