Replace effect-based store sync with useSyncExternalStore

Author: arnautov-anton

packages/react-bindings/package.json

@@ -22,7 +22,8 @@
   ],
   "dependencies": {
     "i18next": "^25.2.1",
-    "rxjs": "~7.8.1"
+    "rxjs": "~7.8.1",
+    "use-sync-external-store": "^1.6.0"
   },
   "peerDependencies": {
     "@stream-io/video-client": "workspace:^",
@@ -32,6 +33,7 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@stream-io/video-client": "workspace:^",
     "@types/react": "^19.2.0",
+    "@types/use-sync-external-store": "^1",
     "react": "19.0.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.40.2",

packages/react-bindings/src/hooks/callStateHooks.ts

@@ -525,7 +525,7 @@ function useLazyDeviceList(manager: DeviceManagerLike) {
       setDevices$(manager.listDevices());
     }
 
-    return devices;
+    return devices ?? EMPTY_DEVICES_ARRAY;
   };
 
   return { getDevices };

packages/react-bindings/src/hooks/useObservableValue.ts

@@ -1,32 +1,43 @@
 import type { Observable } from 'rxjs';
-import { useEffect, useState } from 'react';
+import { useCallback } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { RxUtils } from '@stream-io/video-client';
 
 /**
  * Utility hook which provides the current value of the given observable.
  *
  * @param observable$ the observable to read data from.
- * @param defaultValue a default value. Used when the observable data can't be read or emits an error.
+ * @param defaultValue a default value. Used when the observable data can't be read or emits an error - must be stable.
  */
 export const useObservableValue = <T>(
   observable$: Observable<T>,
   defaultValue?: T,
 ) => {
-  const [value, setValue] = useState<T>(() => {
+  const getSnapshot = useCallback(() => {
     try {
       return RxUtils.getCurrentValue(observable$);
-    } catch (err) {
-      if (typeof defaultValue === 'undefined') throw err;
+    } catch (error) {
+      if (typeof defaultValue === 'undefined') throw error;
       return defaultValue;
     }
-  });
-
-  useEffect(() => {
-    return RxUtils.createSubscription(observable$, setValue, (err) => {
-      console.log('An error occurred while reading an observable', err);
-      if (defaultValue) setValue(defaultValue);
-    });
   }, [defaultValue, observable$]);
 
-  return value;
+  const subscribe = useCallback(
+    (onStoreChange: (v: T) => void) => {
+      const unsubscribe = RxUtils.createSubscription(
+        observable$,
+        onStoreChange,
+        (error) => {
+          console.log('An error occurred while reading an observable', error);
+
+          if (defaultValue) onStoreChange(defaultValue);
+        },
+      );
+
+      return unsubscribe;
+    },
+    [defaultValue, observable$],
+  );
+
+  return useSyncExternalStore(subscribe, getSnapshot);
 };