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

Memoize the ParticipantName component so it does not re-render on
unrelated parent updates when its props have not changed.
---
 .../livekit/components/ParticipantName.tsx    | 44 +++++++++----------
 .../livekit/components/ParticipantTile.tsx    |  8 +++-
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
index cc1d866d..91836a66 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
@@ -1,8 +1,6 @@
-import type { CSSProperties } from 'react'
+import React, { CSSProperties } from 'react'
 import { Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
-import { useParticipantInfo } from '@livekit/components-react'
-import type { Participant } from 'livekit-client'
 
 const participantNameStyles: CSSProperties = {
   paddingBottom: '0.1rem',
@@ -16,29 +14,29 @@ const participantNameScreenShareStyles: CSSProperties = {
   marginLeft: '0.4rem',
 }
 
-export const ParticipantName = ({
-  participant,
-  isScreenShare = false,
-}: {
-  participant: Participant
-  isScreenShare: boolean
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+export const ParticipantName = React.memo(
+  ({
+    displayedName,
+    isScreenShare = false,
+  }: {
+    displayedName?: string
+    isScreenShare: boolean
+  }) => {
+    const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+    if (isScreenShare) {
+      return (
+        <Text variant="sm" style={participantNameScreenShareStyles}>
+          {t('screenShare', { name: displayedName })}
+        </Text>
+      )
+    }
 
-  const { identity, name } = useParticipantInfo({ participant })
-  const displayedName = name != '' ? name : identity
-
-  if (isScreenShare) {
     return (
-      <Text variant="sm" style={participantNameScreenShareStyles}>
-        {t('screenShare', { name: displayedName })}
+      <Text variant="sm" style={participantNameStyles} aria-hidden="true">
+        {displayedName}
       </Text>
     )
   }
+)
 
-  return (
-    <Text variant="sm" style={participantNameStyles} aria-hidden="true">
-      {displayedName}
-    </Text>
-  )
-}
+ParticipantName.displayName = 'ParticipantName'
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index f6e071da..e757ea26 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -12,6 +12,7 @@ import {
   VideoTrack,
   TrackRefContext,
   ParticipantContextIfNeeded,
+  useParticipantInfo,
 } from '@livekit/components-react'
 import React from 'react'
 import {
@@ -74,9 +75,12 @@ export const ParticipantTile: (
   ref
 ) {
   const { pinnedTrackRef } = useSnapshot(layoutStore)
-
   const trackReference = useEnsureTrackRef(trackRef)
 
+  const { identity, name } = useParticipantInfo({
+    participant: trackReference.participant,
+  })
+
   const { elementProps } = useParticipantTile<HTMLDivElement>({
     htmlProps,
     disableSpeakingIndicator,
@@ -222,8 +226,8 @@ export const ParticipantTile: (
                       )}
                       <div className="lk-participant-name-wrapper">
                         <ParticipantName
+                          displayedName={name != '' ? name : identity}
                           isScreenShare={isScreenShare}
-                          participant={trackReference.participant}
                         />
                       </div>
                     </div>