React useSyncExternalStore 如何接入外部状态库？

Question

仓乃文 · Accepted Answer

当需要在 React 组件中订阅外部数据源（如 WebSocket、localStorage、第三方状态库）时，useSyncExternalStore 提供了标准化的订阅方式，解决并发渲染下的 tearing 问题。订阅 localStorage： ```javascript function useLocalStorage(key) { const subscribe = useCallback( (callback) => { window.addEventListener("storage", callback); // 跨标签页同步 return () => window.removeEventListener("storage", callback); }, [key] ); const getSnapshot = () => localStorage.getItem(key); const getServerSnapshot = () => null; // SSR 默认值 return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); } function ThemeToggle() { const theme = useLocalStorage("theme"); return

当前主题：{theme}

; } ``` 订阅 WebSocket： ```javascript function useWebSocket(url) { const subscribe = useCallback( (callback) => { const ws = new WebSocket(url); ws.onmessage = callback; return () => ws.close(); }, [url] ); const getSnapshot = () => lastMessage; return useSyncExternalStore(subscribe, getSnapshot); } ``` 补充说明： - subscribe 返回 unsubscribe 函数，组件卸载时自动调用 - getSnapshot 必须返回缓存的值（引用相等），不能每次返回新对象 - getServerSnapshot 用于 SSR，返回服务端的初始快照 - 解决了 useSyncExternalStore 出现前，外部数据源在并发渲染下可能导致 UI 不一致的问题 - Redux、Zustand、MobX 等状态库内部已使用此 API 接入 React