告别服务端渲染卡顿！useSyncExternalStore 优化水合作用全解析

小刘鸭地下城2025-09-29 17:57

You may be looking for a useSyncExternalStore | Swizec Teller

使用 useEffect 订阅事件然后修改 state，返回 state，在客户端这做是可以的，如果使用服务端渲染就会传卡顿现象，解决方案使用 useSyncExternalStore

js 复制代码

function useSomeValue() {
  const [value, setValue] = useState(0)

  useEffect(() => {
    const eventSource = getEventSource()
    eventSource.subscribe((val) => setValue(val))

    return () => {
      eventSource.unsubscribe()
    }
  }, [])

  return value
}

上面的 gif 中看到的是一个缓慢的水合作用过程。

在服务器上渲染组件
无法订阅浏览器事件
HTML 出现在浏览器中
水合作用
展示运行效果
订阅浏览器事件
更新状态
并渲染了组件

js 复制代码

const eventSource = getEventSource()

function subscribe(callback) {
  eventSource.onChange(callback)
  return () => {
    eventSource.unsubscribe(callback)
  }
}

function useSomeValue() {
  const value = useSyncExternalStore(
    subscribe,
    () => eventSource.currentValue(),
    () => defaultValue
  )

  return value
}