From 15c9ee225a2c37816cf2de70258ea6b167fede85 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 4 Aug 2026 20:00:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=8F=AA=EF=B8=8F(frontend)=20revert=20GridLay?=
 =?UTF-8?q?out=20re-render=20optimization=20too?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Out of precaution, also revert the previous GridLayout re-render
optimization to avoid any layout regression alongside the
CarouselLayout revert.

The useSize-based re-render optimization will be reintroduced in a
dedicated small PR and release. That will also be a good occasion to
polish the layout code along the way.
---
 .../features/layout/components/GridLayout.tsx | 42 +++----------------
 1 file changed, 5 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/features/layout/components/GridLayout.tsx b/src/frontend/src/features/layout/components/GridLayout.tsx
index 1acef661..a0f65868 100644
--- a/src/frontend/src/features/layout/components/GridLayout.tsx
+++ b/src/frontend/src/features/layout/components/GridLayout.tsx
@@ -10,36 +10,8 @@ import { mergeProps } from '@/utils/mergeProps'
 import { PaginationIndicator } from './PaginationIndicator'
 import { useGridLayout } from '../hooks/useGridLayout'
 import { PaginationControl } from './PaginationControl'
-import { useEffect, useRef, useState } from 'react'
 import { useSpeakerPromotionTrigger } from '../hooks/useSpeakerPromotionTrigger'
 
-interface GridLayoutObserverProps {
-  gridEl: React.RefObject<HTMLDivElement>
-  trackCount: number
-  onMaxTilesChange: (maxTiles: number) => void
-}
-
-/**
- * Headless component that runs the layout calculation in isolation and
- * reports the resulting tile capacity upward.
- *
- * `useGridLayout` re-renders its host on every layout recalculation
- * (e.g. container resizes). Rendering it in a null child means only this
- * component churns; the parent `GridLayout` re-renders solely when
- * `maxTiles` actually changes, since `setState` bails out on equal values.
- */
-const GridLayoutObserver = ({
-  gridEl,
-  trackCount,
-  onMaxTilesChange,
-}: GridLayoutObserverProps) => {
-  const { layout } = useGridLayout(gridEl, trackCount)
-  useEffect(() => {
-    onMaxTilesChange(layout.maxTiles)
-  }, [onMaxTilesChange, layout.maxTiles])
-
-  return null
-}
 
 /** @public */
 export interface GridLayoutProps
@@ -67,14 +39,15 @@ export interface GridLayoutProps
  * @public
  */
 export function GridLayout({ tracks, ...props }: GridLayoutProps) {
-  const gridEl = useRef<HTMLDivElement>(null)
-  const [maxTiles, setMaxTiles] = useState(1)
+  const gridEl = React.createRef<HTMLDivElement>()
 
   const elementProps = React.useMemo(
     () => mergeProps(props, { className: 'lk-grid-layout' }),
     [props]
   )
-  const pagination = usePagination(maxTiles, tracks)
+
+  const { layout } = useGridLayout(gridEl, tracks.length)
+  const pagination = usePagination(layout.maxTiles, tracks)
   useSpeakerPromotionTrigger(pagination.tracks)
 
   useSwipe(gridEl, {
@@ -88,13 +61,8 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
       data-lk-pagination={pagination.totalPageCount > 1}
       {...elementProps}
     >
-      <GridLayoutObserver
-        gridEl={gridEl}
-        trackCount={tracks.length}
-        onMaxTilesChange={setMaxTiles}
-      />
       <TrackLoop tracks={pagination.tracks}>{props.children}</TrackLoop>
-      {tracks.length > maxTiles && (
+      {tracks.length > layout.maxTiles && (
         <>
           <PaginationIndicator
             totalPageCount={pagination.totalPageCount}