From 129893ecf9d0672445386691f5bcd48999abe463 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 15 Jul 2026 12:31:20 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20read=20pinned=20?=
 =?UTF-8?q?track=20imperatively=20in=20ParticipantTile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the participant tile, there is no need to read the pinned track
through a Valtio snapshot, which would trigger a re-render every
time the pinned track changes, for every participant tile.

Switch to an imperative read of the store to avoid these unnecessary
re-renders.
---
 .../participantTile/components/ParticipantTile.tsx        | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/participantTile/components/ParticipantTile.tsx b/src/frontend/src/features/participantTile/components/ParticipantTile.tsx
index e7382920..c5a0e70b 100644
--- a/src/frontend/src/features/participantTile/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/participantTile/components/ParticipantTile.tsx
@@ -37,7 +37,6 @@ import { useTranslation } from 'react-i18next'
 import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
 import { KeyboardShortcutHint } from './KeyboardShortcutHint'
-import { useSnapshot } from 'valtio'
 import { layoutStore, clearPinnedTrack } from '@/stores/layout'
 
 export function TrackRefContextIfNeeded(
@@ -77,7 +76,6 @@ export const ParticipantTile: (
   }: ParticipantTileExtendedProps,
   ref
 ) {
-  const { pinnedTrackRef } = useSnapshot(layoutStore)
   const trackReference = useEnsureTrackRef(trackRef)
 
   const { identity, name } = useParticipantInfo({
@@ -98,13 +96,13 @@ export const ParticipantTile: (
       if (
         trackReference.source &&
         !subscribed &&
-        pinnedTrackRef &&
-        isEqualTrackRef(trackReference, pinnedTrackRef)
+        layoutStore.pinnedTrackRef &&
+        isEqualTrackRef(trackReference, layoutStore.pinnedTrackRef)
       ) {
         clearPinnedTrack()
       }
     },
-    [trackReference, pinnedTrackRef]
+    [trackReference]
   )
 
   const { isHandRaised } = useRaisedHand({