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

Memoize the EffectsButton so it does not re-render on unrelated
parent updates when its props have not changed.
---
 .../components/participantTileFocus/EffectsButton.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/participantTile/components/participantTileFocus/EffectsButton.tsx b/src/frontend/src/features/participantTile/components/participantTileFocus/EffectsButton.tsx
index 7060ec2b..be0df6f1 100644
--- a/src/frontend/src/features/participantTile/components/participantTileFocus/EffectsButton.tsx
+++ b/src/frontend/src/features/participantTile/components/participantTileFocus/EffectsButton.tsx
@@ -1,9 +1,10 @@
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { Button } from '@/primitives'
 import { RiImageCircleAiFill } from '@remixicon/react'
 
-export const EffectsButton = () => {
+export const EffectsButton = React.memo(() => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
   const { isEffectsOpen, toggleEffects } = useSidePanel()
   return (
@@ -17,4 +18,6 @@ export const EffectsButton = () => {
       <RiImageCircleAiFill />
     </Button>
   )
-}
+})
+
+EffectsButton.displayName = 'EffectsButton'