Replace use-subscripton with use-sync-external-store (#33770)

Summary: Pull Request resolved: #33770 React has replaced use-subscription with the React 18 compatible use-sync-external-store. Changelog: [General][Changed] - Replace use-subscripton with use-sync-external-store Reviewed By: ryancat Differential Revision: D35592432 fbshipit-source-id: cc2016f66940e53f3614e110bafb02240bae1ae4
facebook · May 6, 2022 · 93b50be · 93b50be
1 parent e5469c4
commit 93b50be
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 27 deletions.
diff --git a/BUCK b/BUCK
@@ -759,7 +759,7 @@ rn_library(
         "//xplat/js:node_modules__react_19shallow_19renderer",
         "//xplat/js:node_modules__regenerator_19runtime",
         "//xplat/js:node_modules__stacktrace_19parser",
-        "//xplat/js:node_modules__use_19subscription",
+        "//xplat/js:node_modules__use_19sync_19external_19store",
         "//xplat/js:node_modules__whatwg_19fetch",
         "//xplat/js/RKJSModules/Libraries/Polyfills:Polyfills",
         "//xplat/js/RKJSModules/Libraries/React:React",

diff --git a/Libraries/Utilities/useColorScheme.js b/Libraries/Utilities/useColorScheme.js
@@ -8,24 +8,18 @@
  * @flow strict-local
  */
 
-import {useMemo} from 'react';
-import {useSubscription} from 'use-subscription';
+'use strict';
+
+import {useSyncExternalStore} from 'use-sync-external-store/shim';
 import Appearance from './Appearance';
 import type {ColorSchemeName} from './NativeAppearance';
 
 export default function useColorScheme(): ?ColorSchemeName {
-  const subscription = useMemo(
-    () => ({
-      getCurrentValue: () => Appearance.getColorScheme(),
-      subscribe: callback => {
-        const appearanceSubscription = Appearance.addChangeListener(callback);
-        return () => {
-          appearanceSubscription.remove();
-        };
-      },
-    }),
-    [],
+  return useSyncExternalStore(
+    callback => {
+      const appearanceSubscription = Appearance.addChangeListener(callback);
+      return () => appearanceSubscription.remove();
+    },
+    () => Appearance.getColorScheme(),
   );
-
-  return useSubscription(subscription);
 }
diff --git a/flow/use-subscription.js → flow/use-sync-external-store.js b/flow/use-subscription.js → flow/use-sync-external-store.js
@@ -11,9 +11,9 @@
 
 'use strict';
 
-declare module 'use-subscription' {
-  declare export function useSubscription<Value>(subscription: {|
-    getCurrentValue: () => Value,
+declare module 'use-sync-external-store/shim' {
+  declare export function useSyncExternalStore<Value>(
     subscribe: (callback: Function) => () => void,
-  |}): Value;
+    getCurrentValue: () => Value,
+  ): Value;
 }
diff --git a/package.json b/package.json
@@ -125,7 +125,7 @@
     "regenerator-runtime": "^0.13.2",
     "scheduler": "^0.21.0",
     "stacktrace-parser": "^0.1.3",
-    "use-subscription": ">=1.0.0 <1.6.0",
+    "use-sync-external-store": "^1.0.0",
     "whatwg-fetch": "^3.0.0",
     "ws": "^6.1.4"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -7239,12 +7239,10 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-"use-subscription@>=1.0.0 <1.6.0":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
+use-sync-external-store@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.0.0.tgz#d98f4a9c2e73d0f958e7e2d2c2bfb5f618cbd8fd"
+  integrity sha512-AFVsxg5GkFg8GDcxnl+Z0lMAz9rE8DGJCc28qnBuQF7lac57B5smLcT37aXpXIIPz75rW4g3eXHPjhHwdGskOw==
 
 use@^3.1.0:
   version "3.1.1"