From 2da35e73ef5046e2941f3a43a9e08d55f90f9275 Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Wed, 17 Apr 2024 10:12:34 +0200
Subject: [PATCH] Return memo'ed participants array from useParticipants hook
 (#829)

---
 .changeset/lucky-cherries-cheer.md          | 5 +++++
 packages/react/src/hooks/useParticipants.ts | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lucky-cherries-cheer.md

diff --git a/.changeset/lucky-cherries-cheer.md b/.changeset/lucky-cherries-cheer.md
new file mode 100644
index 000000000..8203cb406
--- /dev/null
+++ 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
index 1e40701b6..24ebaa4ac 100644
--- 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],
+  );
 }