duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix rules-of-hooks violation in InfiniteGrid

Browse Source 
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
This commit is contained in:
simoleo89
2026-05-11 16:31:51 +00:00
parent 13dc483938
commit 5697d169ee
1 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/InfiniteGrid.tsx
+44 -21
View File
@@ -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;