React-useSyncExternalStore

useSyncExternalStore 是 React 在进入并发渲染语义之后，为“安全接入 React 之外的状态源”提供的标准 Hook。它对应的是从 useContext 继续升级到外部 store 的那一步。

它解决什么问题

在前面的几层里：

useState 管组件局部状态
useReducer 管复杂局部逻辑
useContext 管跨层共享

但当状态已经放到 React 外部时，例如：

Redux store
Zustand store
自定义事件驱动 store

React 就需要一个稳定方式来：

订阅外部 store 的变化
读取当前快照
在并发渲染下保证读取一致性

这就是 useSyncExternalStore 的位置。

一句话理解

useSyncExternalStore 让 React 组件以官方、稳定的方式订阅 React 之外的状态源，并读取它的当前快照。

这里增强的是“与 React 外部状态系统对接”的能力。

为什么不是直接自己订阅

你当然可以自己在 useEffect 里订阅 store，再手动 setState。

但在并发渲染和更复杂的更新时序下，这种方式可能出现：

读到不一致的状态
渲染期间快照变化
订阅和读取之间语义不稳定

useSyncExternalStore 的意义就在于把这件事标准化，让 React 能更安全地处理外部 store。

核心参数

它的核心心智模型很简单：

subscribe 负责告诉 React：“当外部 store 变化时，请通知我”
getSnapshot 负责告诉 React：“现在这份 store 的值是什么”

一个最小心智模型大概是这样：

const value = useSyncExternalStore(subscribe, getSnapshot)

React 会在合适的时机读取快照，并在 store 变化时重新渲染相关组件。

一个简化示例

import { useSyncExternalStore } from 'react'
 
function useCounterStore(store) {
  return useSyncExternalStore(store.subscribe, store.getSnapshot)
}

如果这个 store 提供：

subscribe(listener)
getSnapshot()

那么组件就可以安全读取这份外部状态。

什么时候该用

适合：

你在接 Redux、Zustand 或自定义 store
状态源不属于 React 自己的 state/context
你想把外部状态封装成自定义 Hook 给组件消费

这通常是 React 状态管理已经进入“外部 store”阶段的标志。

什么时候不该用

不适合：

组件局部状态
普通跨层共享
只是想少写几行 useState

如果状态根本不在 React 外部，就通常不需要 useSyncExternalStore。

它和 Context 的关系

Context 和 useSyncExternalStore 经常被放在一起比较，但它们解决的问题并不相同：

Context 解决“值怎么跨层传”
useSyncExternalStore 解决“组件怎么安全订阅外部状态源”

所以当系统从：

局部状态
跨层共享

继续升级到：

独立 store
更细粒度订阅
更复杂的全局协作

useSyncExternalStore 就会出现。

一个常见误区

很多人会把它理解成“又一个全局状态 Hook”。

更准确的理解是：

它不是 store
它不负责设计状态结构
它只是 React 和外部 store 之间的桥

状态管理方案本身仍然要看 zustand、jotai、redux 或你的自定义设计。

和并发渲染的关系

这也是为什么它会和 React Fiber 联系起来。

一旦 React 的更新不再只是单纯同步一路跑到底，就更需要确保：

当前读到的快照是稳定的
store 更新和渲染时机之间语义一致

useSyncExternalStore 就是在这个背景下变得重要。

和其它笔记的关系

在 React Hooks 里，它对应“接入外部状态系统”这一层
在 React 状态管理里，它是从 Context 走向外部 store 的关键接口
在 React Fiber 里，可以理解它为什么和并发渲染语义相关

以我所主，为我所用

探索