Hi @FedericoDiRosa , great contribution to react-window here! I'm having an issue using your library, however. It seems that introducing react-window-scroller to my implementation causes the Grid's cell components to unmount and remount whenever the parent component re-renders. This is causing a highly degraded performance. Here is the only changes in code I made:
return (
<div ref={ref} style={{ flex: '1 1 auto', overflow: 'hidden' }}>
<FixedSizeGrid
rowCount={rowCount}
columnCount={itemsPerRow}
rowHeight={cardWidth + cardContentHeight + GRID_GAP}
columnWidth={cardWidth}
height={height}
width={gridWidth}
overscanRowCount={4}
itemData={itemsData}
>
{CardItem}
</FixedSizeGrid>
</div>
);
to
return (
<div ref={ref} style={{ flex: '1 1 auto', overflow: 'hidden' }}>
{/* @ts-ignore */}
<ReactWindowScroller isGrid>
{({ ref: gridRef, outerRef, style, onScroll }) => {
return (
<FixedSizeGrid
ref={gridRef}
outerRef={outerRef}
style={style}
onScroll={onScroll}
rowCount={rowCount}
columnCount={itemsPerRow}
rowHeight={cardWidth + cardContentHeight + GRID_GAP}
columnWidth={cardWidth}
height={height}
width={gridWidth}
overscanRowCount={4}
itemData={itemsData}
>
{CardItem}
</FixedSizeGrid>
);
}}
</ReactWindowScroller>
</div>
);
As you can see in the screenshot below, when I resize the window or change the width size of the parent component, the page becomes very slow due to massive amounts of unmounting and remounting:
Hi @FedericoDiRosa , great contribution to react-window here! I'm having an issue using your library, however. It seems that introducing react-window-scroller to my implementation causes the Grid's cell components to unmount and remount whenever the parent component re-renders. This is causing a highly degraded performance. Here is the only changes in code I made:
to
As you can see in the screenshot below, when I resize the window or change the width size of the parent component, the page becomes very slow due to massive amounts of unmounting and remounting:
