⚡️(frontend) memoize the KeyboardShortcutHint component

The KeyboardShortcutHint component only renders a string and has no
reason to re-render on unrelated updates. Memoize it to skip those
re-renders.

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> = ({
+export const KeyboardShortcutHint = React.memo(
-  children,
+  ({ hint }: KeyboardShortcutHintProps) => {
-}) => {
+    return <Hint>{hint}</Hint>
-  return <Hint>{children}</Hint>
+  }
-}
+)
+
+KeyboardShortcutHint.displayName = 'KeyboardShortcutHint'

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -241,13 +241,13 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <KeyboardShortcutHint>
+      <KeyboardShortcutHint
-        {t('toolbarHint', {
+        hint={t('toolbarHint', {
           shortcut: formatShortcutLabel(
             getShortcutDescriptorById('open-shortcuts')?.shortcut
           ),
         })}
-      </KeyboardShortcutHint>
+      />
     </div>
   )
 })