From a89fff9f52085fcc8e73255f1308ee7a25d6eba9 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 16 Jul 2026 14:23:55 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20memoize=20the=20?=
 =?UTF-8?q?ActiveSpeaker=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Memoize the ActiveSpeaker component used in the push-to-talk
component so it does not re-render on unrelated parent updates when
its props have not changed.
---
 .../rooms/components/ActiveSpeaker.tsx        | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx b/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
index d681019f..3d5748c6 100644
--- a/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
+++ b/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const StyledContainer = styled('div', {
@@ -67,35 +68,36 @@ export type ActiveSpeakerProps = {
   pushToTalk?: boolean
 }
 
-export const ActiveSpeaker = ({
-  isSpeaking,
-  pushToTalk,
-}: ActiveSpeakerProps) => {
-  return (
-    <StyledContainer pushToTalk={pushToTalk}>
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '300ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        style={{
-          animationDelay: '100ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '500ms',
-        }}
-      />
-    </StyledContainer>
-  )
-}
+export const ActiveSpeaker = React.memo(
+  ({ isSpeaking, pushToTalk }: ActiveSpeakerProps) => {
+    return (
+      <StyledContainer pushToTalk={pushToTalk}>
+        <StyledChild
+          pushToTalk={pushToTalk}
+          active={isSpeaking}
+          size="small"
+          style={{
+            animationDelay: '300ms',
+          }}
+        />
+        <StyledChild
+          pushToTalk={pushToTalk}
+          active={isSpeaking}
+          style={{
+            animationDelay: '100ms',
+          }}
+        />
+        <StyledChild
+          pushToTalk={pushToTalk}
+          active={isSpeaking}
+          size="small"
+          style={{
+            animationDelay: '500ms',
+          }}
+        />
+      </StyledContainer>
+    )
+  }
+)
+
+ActiveSpeaker.displayName = 'ActiveSpeaker'