From 9b6b32c3d5611655c6a494640ebb381cb7a3e5ba Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 29 Aug 2025 10:31:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20nested=20React?=
 =?UTF-8?q?=20components=20in=20participant=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor participant list to avoid nested React component definitions
that lose state on parent re-renders and cause unnecessary recreation.

Moves component definitions outside render methods to prevent state loss
bugs and improve performance by eliminating redundant component
instantiation on each parent render cycle.
---
 .../Participants/ParticipantsCollapsableList.tsx       |  6 +++---
 .../controls/Participants/ParticipantsList.tsx         | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx
index 8f835737..a0c3d13a 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { ToggleButton } from 'react-aria-components'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
@@ -51,7 +51,7 @@ export type ParticipantsCollapsableListProps<T> = {
   heading: string
   participants: Array<T>
   renderParticipant: (participant: T) => JSX.Element
-  action?: () => JSX.Element
+  action?: ReactNode
 }
 
 export function ParticipantsCollapsableList<T>({
@@ -101,7 +101,7 @@ export function ParticipantsCollapsableList<T>({
       </ToggleHeader>
       {isOpen && (
         <ListContainer>
-          {action && action()}
+          {action}
           {participants.map((participant) => renderParticipant(participant))}
         </ListContainer>
       )}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index 340d9cb3..d9d727d7 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -75,7 +75,7 @@ export const ParticipantsList = () => {
                 onAction={handleParticipantEntry}
               />
             )}
-            action={() => <></>}
+            action={<></>}
           />
         </Div>
       )}
@@ -90,9 +90,9 @@ export const ParticipantsList = () => {
                 participant={participant}
               />
             )}
-            action={() => (
+            action={
               <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
+            }
           />
         </Div>
       )}
@@ -105,9 +105,7 @@ export const ParticipantsList = () => {
             participant={participant}
           />
         )}
-        action={() => (
-          <MuteEveryoneButton participants={sortedRemoteParticipants} />
-        )}
+        action={<MuteEveryoneButton participants={sortedRemoteParticipants} />}
       />
     </Div>
   )