From 7691e262d6936521d54cd5e0605d5f99201222b5 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 15 Jul 2026 12:47:12 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20narrow=20chat=20?=
 =?UTF-8?q?event=20subscriptions=20to=20reduce=20re-renders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduce the set of events the chat subscribes to, keeping only those
that actually affect its rendering.

This avoids frequent re-renders triggered by unrelated events on
the room or participants.
---
 .../features/rooms/livekit/prefabs/Chat.tsx    | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx b/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
index 3ff261e1..59be9156 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import {
   formatChatMessageLinks,
   useChat,
-  useParticipants,
+  useRemoteParticipants,
   useRoomContext,
 } from '@livekit/components-react'
 import {
@@ -75,13 +75,9 @@ export function Chat({ ...props }: ChatProps) {
     shouldRestoreOnClose: () => !isSidePanelOpen,
   })
 
-  // Use useParticipants hook to trigger a re-render when the participant list changes.
-  const participants = useParticipants({
-    updateOnlyOn: [
-      RoomEvent.ParticipantAttributesChanged,
-      RoomEvent.ParticipantNameChanged,
-      RoomEvent.ParticipantMetadataChanged,
-    ],
+  // Use to trigger a re-render when the participant list changes.
+  const remoteParticipants = useRemoteParticipants({
+    updateOnlyOn: [RoomEvent.ParticipantNameChanged],
   })
 
   const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
@@ -150,10 +146,10 @@ export function Chat({ ...props }: ChatProps) {
         msg.timestamp - allMsg[idx - 1].timestamp < 60_000 &&
         allMsg[idx - 1].from === msg.from,
     }))
-    // `participants` is included so rows re-render when participant
-    // information (name, metadata) changes.
+    // `remoteParticipants` is included so rows re-render when participant
+    // information (name) changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatMessages, participants])
+  }, [chatMessages, remoteParticipants])
 
   return (
     <Div