From 78ddb121e3895da23e36dab7e47c3a559965b35e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 3 Mar 2026 19:40:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20avoid=20recreati?=
 =?UTF-8?q?ng=20inline=20array=20props=20in=20VideoTab.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The items array was defined inline, creating a new reference on
every render.

Hoist the array to a module-level constant or memoize it with
useMemo to prevent unnecessary re-renders.
---
 .../settings/components/tabs/VideoTab.tsx     | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/features/settings/components/tabs/VideoTab.tsx b/src/frontend/src/features/settings/components/tabs/VideoTab.tsx
index 90607654..7a9dbedd 100644
--- a/src/frontend/src/features/settings/components/tabs/VideoTab.tsx
+++ b/src/frontend/src/features/settings/components/tabs/VideoTab.tsx
@@ -4,7 +4,7 @@ import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { useMediaDeviceSelect, useRoomContext } from '@livekit/components-react'
 import { useTranslation } from 'react-i18next'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { css } from '@/styled-system/css'
 import {
   createLocalVideoTrack,
@@ -119,6 +119,40 @@ export const VideoTab = ({ id }: VideoTabProps) => {
     }
   }, [videoDeviceId, videoElement])
 
+  const resolutionItems = useMemo(() => {
+    return [
+      {
+        value: 'h720',
+        label: `${t('resolution.publish.items.high')} (720p)`,
+      },
+      {
+        value: 'h360',
+        label: `${t('resolution.publish.items.medium')} (360p)`,
+      },
+      {
+        value: 'h180',
+        label: `${t('resolution.publish.items.low')} (180p)`,
+      },
+    ]
+  }, [t])
+
+  const videoQualityItems = useMemo(() => {
+    return [
+      {
+        value: VideoQuality.HIGH.toString(),
+        label: t('resolution.subscribe.items.high'),
+      },
+      {
+        value: VideoQuality.MEDIUM.toString(),
+        label: t('resolution.subscribe.items.medium'),
+      },
+      {
+        value: VideoQuality.LOW.toString(),
+        label: t('resolution.subscribe.items.low'),
+      },
+    ]
+  }, [t])
+
   return (
     <TabPanel padding={'md'} flex id={id}>
       <RowWrapper heading={t('camera.heading')}>
@@ -180,20 +214,7 @@ export const VideoTab = ({ id }: VideoTabProps) => {
         <Field
           type="select"
           label={t('resolution.publish.label')}
-          items={[
-            {
-              value: 'h720',
-              label: `${t('resolution.publish.items.high')} (720p)`,
-            },
-            {
-              value: 'h360',
-              label: `${t('resolution.publish.items.medium')} (360p)`,
-            },
-            {
-              value: 'h180',
-              label: `${t('resolution.publish.items.low')} (180p)`,
-            },
-          ]}
+          items={resolutionItems}
           selectedKey={videoPublishResolution}
           onSelectionChange={async (key) => {
             await handleVideoResolutionChange(key as VideoResolution)
@@ -208,20 +229,7 @@ export const VideoTab = ({ id }: VideoTabProps) => {
         <Field
           type="select"
           label={t('resolution.subscribe.label')}
-          items={[
-            {
-              value: VideoQuality.HIGH.toString(),
-              label: t('resolution.subscribe.items.high'),
-            },
-            {
-              value: VideoQuality.MEDIUM.toString(),
-              label: t('resolution.subscribe.items.medium'),
-            },
-            {
-              value: VideoQuality.LOW.toString(),
-              label: t('resolution.subscribe.items.low'),
-            },
-          ]}
+          items={videoQualityItems}
           selectedKey={videoSubscribeQuality?.toString()}
           onSelectionChange={(key) => {
             if (key == undefined) return