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

You may be looking for a useSyncExternalStore | Swizec Teller

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

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

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

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

  return value
}

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

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

const eventSource = getEventSource()

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

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

  return value
}