From 5697d169ee2a47689893778daff32a7ee981a170 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@users.noreply.github.com>
Date: Mon, 11 May 2026 16:31:51 +0000
Subject: [PATCH] Fix rules-of-hooks violation in InfiniteGrid

InfiniteGridRoot called useVirtualizer + 2 useEffect after an early
return for the squareItems branch, which violates the rules of hooks
(react-hooks v7 now flags this as an error and react-compiler skips
the component entirely).

Split the component into three:

- useColumnMeasure: shared custom hook that owns parentRef +
  ResizeObserver-based column measurement (used by both branches).
- InfiniteGridSquare: the non-virtualized grid for squareItems mode.
  Doesn't call useVirtualizer.
- InfiniteGridVirtualized: the virtualized branch with TanStack
  Virtual + scroll/padding effects.

InfiniteGridRoot becomes a thin selector that routes by props.squareItems.
All hooks in each sub-component are now unconditional.

The remaining lint findings on this file (set-state-in-effect inside
InfiniteGridItem, react-hooks/incompatible-library on useVirtualizer)
are pre-existing/informational and out of scope.

https://claude.ai/code/session_01GrR87LAqnAEyKG2ZbmQt5Q
---
 src/layout/InfiniteGrid.tsx | 65 +++++++++++++++++++++++++------------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/layout/InfiniteGrid.tsx b/src/layout/InfiniteGrid.tsx
index 47ad552..51a3af2 100644
--- a/src/layout/InfiniteGrid.tsx
+++ b/src/layout/InfiniteGrid.tsx
@@ -1,5 +1,5 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, Ref, useEffect, useRef, useState } from 'react';
+import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, Ref, RefObject, useEffect, useRef, useState } from 'react';
 import { classNames } from './classNames';
 import { NitroLimitedEditionStyledNumberView } from './limited-edition';
 import { styleNames } from './styleNames';
@@ -17,15 +17,11 @@ type Props<T> = {
 
 const GRID_GAP_PX = 4;
 
-const InfiniteGridRoot = <T,>(props: Props<T>) =>
+const useColumnMeasure = (itemMinWidth: number | null, columnCountProp: number): { parentRef: RefObject<HTMLDivElement | null>; columnCount: number } =>
 {
-    const { items = [], columnCount: columnCountProp = 4, overscan = 5, estimateSize = 45, squareItems = false, itemMinWidth = null, rowGap = null, itemRender = null } = props;
     const parentRef = useRef<HTMLDivElement>(null);
     const [ measuredColumnCount, setMeasuredColumnCount ] = useState<number>(columnCountProp);
 
-    const columnCount = (itemMinWidth && itemMinWidth > 0) ? measuredColumnCount : columnCountProp;
-    const rowsContainerClassName = (rowGap !== null) ? 'flex flex-col w-full relative' : 'flex flex-col w-full *:pb-1 relative';
-
     useEffect(() =>
     {
         if(!itemMinWidth || itemMinWidth <= 0) return;
@@ -48,26 +44,46 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
         return () => observer.disconnect();
     }, [ itemMinWidth ]);
 
+    const columnCount = (itemMinWidth && itemMinWidth > 0) ? measuredColumnCount : columnCountProp;
+
+    return { parentRef, columnCount };
+};
+
+const InfiniteGridSquare = <T,>(props: Props<T>) =>
+{
+    const { items = [], columnCount: columnCountProp = 4, itemMinWidth = null, itemRender = null } = props;
+    const { parentRef } = useColumnMeasure(itemMinWidth, columnCountProp);
+
     const autoFillStyle = (itemMinWidth && itemMinWidth > 0)
         ? { gridTemplateColumns: `repeat(auto-fill, ${ itemMinWidth }px)` }
         : null;
     const fixedColsClass = (itemMinWidth && itemMinWidth > 0) ? '' : `grid-cols-${ columnCountProp }`;
 
-    if(squareItems)
-    {
-        return (
-            <div ref={ parentRef } className="overflow-y-auto size-full">
-                <div className={ `grid ${ fixedColsClass } gap-1 w-full` } style={ autoFillStyle ?? undefined }>
-                    { items.map((item, index) =>
-                    {
-                        if(!item) return <Fragment key={ `${ index }-empty` } />;
+    return (
+        <div ref={ parentRef } className="overflow-y-auto size-full">
+            <div className={ `grid ${ fixedColsClass } gap-1 w-full` } style={ autoFillStyle ?? undefined }>
+                { items.map((item, index) =>
+                {
+                    if(!item) return <Fragment key={ `${ index }-empty` } />;
 
-                        return <Fragment key={ `${ index }-item` }>{ itemRender(item, index) }</Fragment>;
-                    }) }
-                </div>
+                    return <Fragment key={ `${ index }-item` }>{ itemRender(item, index) }</Fragment>;
+                }) }
             </div>
-        );
-    }
+        </div>
+    );
+};
+
+const InfiniteGridVirtualized = <T,>(props: Props<T>) =>
+{
+    const { items = [], columnCount: columnCountProp = 4, overscan = 5, estimateSize = 45, itemMinWidth = null, rowGap = null, itemRender = null } = props;
+    const { parentRef, columnCount } = useColumnMeasure(itemMinWidth, columnCountProp);
+
+    const rowsContainerClassName = (rowGap !== null) ? 'flex flex-col w-full relative' : 'flex flex-col w-full *:pb-1 relative';
+
+    const autoFillStyle = (itemMinWidth && itemMinWidth > 0)
+        ? { gridTemplateColumns: `repeat(auto-fill, ${ itemMinWidth }px)` }
+        : null;
+    const fixedColsClass = (itemMinWidth && itemMinWidth > 0) ? '' : `grid-cols-${ columnCountProp }`;
 
     const virtualizer = useVirtualizer({
         count: Math.ceil(items.length / columnCount),
@@ -97,7 +113,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
         {
             window.removeEventListener('resize', checkAndApplyPadding);
         };
-    }, [ items ]);
+    }, [ items, parentRef ]);
 
     useEffect(() =>
     {
@@ -124,7 +140,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
                         className={ `grid ${ fixedColsClass } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
                         data-index={ virtualRow.index }
                         style={ {
-                            ...(!squareItems && rowGap === null && { height: virtualRow.size }),
+                            ...(rowGap === null && { height: virtualRow.size }),
                             ...(autoFillStyle ?? {}),
                             ...(rowGap !== null && { paddingBottom: `${ rowGap }px` }),
                             transform: `translateY(${ virtualRow.start }px)`
@@ -150,6 +166,13 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
     );
 };
 
+const InfiniteGridRoot = <T,>(props: Props<T>) =>
+{
+    return props.squareItems
+        ? <InfiniteGridSquare<T> { ...props } />
+        : <InfiniteGridVirtualized<T> { ...props } />;
+};
+
 type InfiniteGridItemProps = {
     itemImage?: string;
     itemColor?: string;