fix(react-bindings): getSnapshot caching

packages/client/src/store/CallState.ts

@@ -74,6 +74,29 @@ 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 participants;
+
+    // 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.
@@ -353,12 +376,12 @@ export class CallState {
     );
 
     this.remoteParticipants$ = this.participants$.pipe(
-      map((participants) => participants.filter((p) => !p.isLocalParticipant)),
+      map(createStableParticipantsFilter((p) => !p.isLocalParticipant)),
       shareReplay({ bufferSize: 1, refCount: true }),
     );
 
     this.pinnedParticipants$ = this.participants$.pipe(
-      map((participants) => participants.filter((p) => !!p.pin)),
+      map(createStableParticipantsFilter((p) => !!p.pin)),
       shareReplay({ bufferSize: 1, refCount: true }),
     );
 

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

@@ -293,6 +293,14 @@ export const useRemoteParticipants = () => {
   return useObservableValue(remoteParticipants$);
 };
 
+/**
+ * A hook which provides a list of participants that are currently pinned.
+ */
+export const usePinnedParticipants = () => {
+  const { pinnedParticipants$ } = useCallState();
+  return useObservableValue(pinnedParticipants$);
+};
+
 /**
  * Returns the approximate participant count of the active call.
  * This includes the anonymous users as well, and it is computed on the server.