Add quick useSyncExternalStore shim

FormidableLabs · Jan 5, 2022 · 85de85f · 85de85f
1 parent 0579cfc
commit 85de85f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     }
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.26.0",

diff --git a/src/internals/dispatcher.js b/src/internals/dispatcher.js
@@ -320,8 +320,22 @@ function useDeferredValue<T>(input: T): T {
   return input
 }
 
+// See: https://github.com/facebook/react/blob/fe41934/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js#L10-L20
+function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T
+): T {
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
+  return getSnapshot()
+}
+
 export const Dispatcher = {
   readContext,
+  useSyncExternalStore,
   useContext,
   useMemo,
   useReducer,