⏪️(frontend) revert GridLayout re-render optimization too

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.

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 gridEl = React.createRef<HTMLDivElement>()
-  const [maxTiles, setMaxTiles] = useState(1)
 
   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}