fix(react-bindings): getSnapshot caching (#2008)

Fixes #2006. Cold-derived `Observable` instances (`remoteParticipants$`
and similar) get read twice in strict mode, and as such, the derivative
runs multiple times, creating multiple shallow-equal arrays.
Although this isn't exactly an issue, as we had this behavior before
#1953, the emitter warning could be confusing.

Docs: GetStream/docs-content#778

---------

Co-authored-by: Anton Arnautov <[email protected]>

Author: oliverlaz

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.