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

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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

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",

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);
 }

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;
 }

package.json

@@ -117,7 +117,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",
     "react-native-codegen": "^0.69.1"

yarn.lock

@@ -7260,12 +7260,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"