AI 摘要：作者通过对常见的 React 状态订阅写法 (useEffect + useState) 进行剖析，指出该模式在服务端渲染 (SSR) 下可能引发抖动 (jank)，并介绍了 useSyncExternalStore 的优势：它提供了更简洁的 API，支持订阅机制和服务端默认值，从而提升 SSR 渲染体验并减少 UI 闪烁。

1. 常见的 useEffect + useState 订阅模式
• 使用 useEffect 在组件挂载时订阅事件源 (event source)。
• 更新 useState 来触发组件重渲染，卸载时清理订阅。
• 常见于绑定 ResizeObserver、DOM 引用、外部事件等场景。

2. 该模式在服务端渲染 (SSR) 下的问题
• 初始渲染使用默认值，SSR 时无法订阅浏览器事件。
• 浏览器接管 (hydration) 后才启动订阅并更新状态。
• 导致界面多次渲染，出现 UI 闪烁、过渡不平滑的现象 (jank)。

3. 使用 useSyncExternalStore 的改进方案
• 提供显式的 subscribe 函数实现监听与取消订阅。
• 第二个参数为获取当前值的方法，确保 UI 与外部状态同步。
• 第三个参数允许定义服务端默认值，提升 SSR 初始化体验。
• 案例对比表明，useSyncExternalStore 渲染更平稳，减少 UI 抖动。

4. 开发实践与思考
• 在涉及外部状态订阅 (API、事件、可观察对象) 场景下，应优先考虑 useSyncExternalStore。
• 默认值的设计影响 SSR 渲染体验，可以通过合理设置来降低不适感。
• 对数据可视化、实时 UI 交互等高频场景尤其重要。

Swizec

You may be looking for a useSyncExternalStore | Swizec Teller

When you see a `useEffect` that updates a `useState` and returns a value, you might be looking for a `useSyncExternalStore`. This is my current vendetta.