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

The KeyboardShortcutHint component only renders a string and has no
reason to re-render on unrelated updates. Memoize it to skip those
re-renders.
---
 .../livekit/components/KeyboardShortcutHint.tsx  | 16 +++++++++-------
 .../rooms/livekit/components/ParticipantTile.tsx |  6 +++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx b/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx
index b4502607..dbb39794 100644
--- a/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const Hint = styled('div', {
@@ -25,15 +25,17 @@ const Hint = styled('div', {
 })
 
 export interface KeyboardShortcutHintProps {
-  children: ReactNode
+  hint?: string
 }
 
 /**
  * Small reusable bubble used to display and announce keyboard shortcuts,
  * typically when an element receives keyboard focus.
  */
-export const KeyboardShortcutHint: React.FC<KeyboardShortcutHintProps> = ({
-  children,
-}) => {
-  return <Hint>{children}</Hint>
-}
+export const KeyboardShortcutHint = React.memo(
+  ({ hint }: KeyboardShortcutHintProps) => {
+    return <Hint>{hint}</Hint>
+  }
+)
+
+KeyboardShortcutHint.displayName = 'KeyboardShortcutHint'
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index 66c2a0a4..f6e071da 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -241,13 +241,13 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <KeyboardShortcutHint>
-        {t('toolbarHint', {
+      <KeyboardShortcutHint
+        hint={t('toolbarHint', {
           shortcut: formatShortcutLabel(
             getShortcutDescriptorById('open-shortcuts')?.shortcut
           ),
         })}
-      </KeyboardShortcutHint>
+      />
     </div>
   )
 })