Return memo'ed participants array from useParticipants hook (#829)

livekit · Apr 17, 2024 · 2da35e7 · 2da35e7
1 parent ecef222
commit 2da35e7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/lucky-cherries-cheer.md b/.changeset/lucky-cherries-cheer.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Use participant array length to re-trigger sorting
diff --git a/packages/react/src/hooks/useParticipants.ts b/packages/react/src/hooks/useParticipants.ts
@@ -1,6 +1,7 @@
 import type { Room, RoomEvent } from 'livekit-client';
 import { useLocalParticipant } from './useLocalParticipant';
 import { useRemoteParticipants } from './useRemoteParticipants';
+import * as React from 'react';
 
 /** @public */
 export interface UseParticipantsOptions {
@@ -34,5 +35,8 @@ export function useParticipants(options: UseParticipantsOptions = {}) {
   const remoteParticipants = useRemoteParticipants(options);
   const { localParticipant } = useLocalParticipant(options);
 
-  return [localParticipant, ...remoteParticipants];
+  return React.useMemo(
+    () => [localParticipant, ...remoteParticipants],
+    [localParticipant, remoteParticipants],
+  );
 }