TRPC React-Query v11 中 useSubscription 的 onData 回调未使用 ref 的问题分析

问题背景

在 TRPC React-Query v11 版本中，开发团队发现了一个关于 useSubscription hook 的重要问题。该 hook 用于处理实时数据订阅，通常需要传入几个回调函数，包括 onData、onError 和 onStarted。

技术细节

在 React 开发中，当我们将函数作为依赖项传递给 hooks 时，通常需要考虑这些函数的稳定性问题。如果每次渲染都创建新的函数实例，可能会导致不必要的重新渲染或订阅重建。

TRPC 团队在之前的版本中已经意识到这个问题，并通过 PR #4222 修复了 onError 和 onStarted 回调的问题，确保它们通过 ref 来引用，这样即使回调函数在重新渲染时发生变化，也不会影响订阅行为。

然而，在 v11 版本中，onData 回调却没有采用同样的处理方式。这意味着：

1. 如果用户传递未经过 memo 处理的 onData 回调函数
2. 或者回调函数在组件重新渲染时发生变化
3. 可能会导致订阅被不必要地重建
4. 甚至在某些情况下出现数据处理的意外行为

影响范围

这个问题主要影响使用 TRPC React-Query v11 版本中 useSubscription hook 的开发人员，特别是那些：

• 直接在组件内定义 onData 处理函数而未使用 useCallback 的情况
• 依赖 onData 回调函数稳定性来实现特定业务逻辑的场景

解决方案

对于遇到此问题的开发者，可以采取以下临时解决方案：

1. 使用 useCallback 来稳定 onData 回调函数
2. 或者等待官方发布修复版本

从技术实现角度来看，修复方案相对简单：只需要将 opts.onData 改为 optsRef.current.onData，与其他回调函数的处理方式保持一致。

最佳实践

为了避免类似问题，建议开发者在实现自定义 hooks 时：

1. 对于所有回调类型的参数，考虑使用 ref 来保持引用稳定性
2. 确保同一 hook 的所有类似参数采用一致的处理方式
3. 在版本升级时，注意检查相关回调函数的处理逻辑是否保持一致

总结

这个问题的发现提醒我们，在开发复杂的状态管理工具时，细节的一致性非常重要。即使是看似简单的回调函数处理，也可能因为一处遗漏而导致意料之外的行为。TRPC 团队已经确认这是一个需要修复的问题，开发者可以关注后续版本的更新。