fix: revert usage of useSyncExternalStore (#2043)

Reverts #1953. In some environments, `useSyncExternalStore` causes
misleading warnings that the result of `getSnapshot` should be cached.
Although this isn't correct, I understand the confusion this warning
creates. Until we find a way to get rid of it, I'm reverting to the old
implementation of `useObservableValue`, based on `useState + useEffect`
combo.

Fixes: #2034 #2006
Ref: #2008

Author: oliverlaz

packages/client/src/store/CallState.ts

@@ -74,29 +74,6 @@ type OrphanedTrack = {
   track: MediaStream;
 };
 
-/**
- * Creates a stable participant filter function, ready to be used in combination
- * with the `useSyncExternalStore` hook.
- *
- * @param predicate the predicate to use.
- */
-const createStableParticipantsFilter = (
-  predicate: (p: StreamVideoParticipant) => boolean,
-) => {
-  const empty: StreamVideoParticipant[] = [];
-  return (participants: StreamVideoParticipant[]) => {
-    // no need to filter if there are no participants
-    if (!participants.length) return empty;
-
-    // return a stable empty array if there are no remote participants
-    // instead of creating an empty one
-    const filteredParticipants = participants.filter(predicate);
-    if (!filteredParticipants.length) return empty;
-
-    return filteredParticipants;
-  };
-};
-
 /**
  * Holds the state of the current call.
  * @react You don't have to use this class directly, as we are exposing the state through Hooks.
@@ -376,12 +353,12 @@ export class CallState {
     );
 
     this.remoteParticipants$ = this.participants$.pipe(
-      map(createStableParticipantsFilter((p) => !p.isLocalParticipant)),
+      map((participants) => participants.filter((p) => !p.isLocalParticipant)),
       shareReplay({ bufferSize: 1, refCount: true }),
     );
 
     this.pinnedParticipants$ = this.participants$.pipe(
-      map(createStableParticipantsFilter((p) => !!p.pin)),
+      map((participants) => participants.filter((p) => !!p.pin)),
       shareReplay({ bufferSize: 1, refCount: true }),
     );
 

packages/react-bindings/package.json

@@ -22,8 +22,7 @@
   ],
   "dependencies": {
     "i18next": "^25.6.0",
-    "rxjs": "~7.8.2",
-    "use-sync-external-store": "^1.6.0"
+    "rxjs": "~7.8.2"
   },
   "peerDependencies": {
     "@stream-io/video-client": "workspace:^",
@@ -33,7 +32,6 @@
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/video-client": "workspace:^",
     "@types/react": "~19.1.17",
-    "@types/use-sync-external-store": "^1",
     "react": "19.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.52.4",

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

@@ -1,6 +1,5 @@
 import type { Observable } from 'rxjs';
-import { useCallback } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useEffect, useState } from 'react';
 import { RxUtils } from '@stream-io/video-client';
 
 /**
@@ -13,31 +12,21 @@ export const useObservableValue = <T>(
   observable$: Observable<T>,
   defaultValue?: T,
 ) => {
-  const getSnapshot = useCallback(() => {
+  const [value, setValue] = useState<T>(() => {
     try {
       return RxUtils.getCurrentValue(observable$);
-    } catch (error) {
-      if (typeof defaultValue === 'undefined') throw error;
+    } catch (err) {
+      if (typeof defaultValue === 'undefined') throw err;
       return defaultValue;
     }
-  }, [defaultValue, observable$]);
-
-  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$],
-  );
+  useEffect(() => {
+    return RxUtils.createSubscription(observable$, setValue, (err) => {
+      console.log('An error occurred while reading an observable', err);
+      if (defaultValue) setValue(defaultValue);
+    });
+  }, [defaultValue, observable$]);
 
-  return useSyncExternalStore(subscribe, getSnapshot);
+  return value;
 };

yarn.lock

@@ -7542,14 +7542,12 @@ __metadata:
     "@rollup/plugin-typescript": "npm:^12.1.4"
     "@stream-io/video-client": "workspace:^"
     "@types/react": "npm:~19.1.17"
-    "@types/use-sync-external-store": "npm:^1"
     i18next: "npm:^25.6.0"
     react: "npm:19.1.0"
     rimraf: "npm:^6.0.1"
     rollup: "npm:^4.52.4"
     rxjs: "npm:~7.8.2"
     typescript: "npm:^5.9.3"
-    use-sync-external-store: "npm:^1.6.0"
   peerDependencies:
     "@stream-io/video-client": "workspace:^"
     react: ^17 || ^18 || ^19
@@ -8422,13 +8420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/use-sync-external-store@npm:^1":
-  version: 1.5.0
-  resolution: "@types/use-sync-external-store@npm:1.5.0"
-  checksum: 10/39e5be8dc2cca080b490f2f79fed4381ae7eebee3f981208e359856733eafb2479d229db07a552f6c99fe0b5c09b3e46a3e6a870e00a88b50f3e690e73d2649b
-  languageName: node
-  linkType: hard
-
 "@types/whatwg-mimetype@npm:^3.0.2":
   version: 3.0.2
   resolution: "@types/whatwg-mimetype@npm:3.0.2"
@@ -24031,7 +24022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0, use-sync-external-store@npm:^1.6.0":
+"use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"
   peerDependencies: