2

I am using react-window to render virtualized lists. I created a generic component, so it is easy to make every list virtualized.

The generic component looks like this:

const itemData = useMemo(() => React.Children.toArray(children), [children]);
const contextValue = useMemo(() => ({ setRowHeight }), [setRowHeight]);

return (
    <TableBody className={classNames(classes.root, className)} ref={rootRef} data-testid='virtualized-table-body' {...other}>
        <InfiniteLoader ref={loaderRef} itemCount={totalCount} isItemLoaded={isItemLoaded} loadMoreItems={loadMoreItems}>
            {({ onItemsRendered, ref }) => (
                <VirtualizedTableContext.Provider value={contextValue}>
                    <VariableSizeList
                        itemCount={loadedCount}
                        height={height}
                        width='100%'
                        itemSize={getRowHeight}
                        ref={ref}
                        itemData={itemData}
                        estimatedItemSize={configuration.defaultVirtualizedRowHeight}
                        overscanCount={overscanCount}
                        onItemsRendered={onItemsRendered}
                    >
                        {VirtualizedRow}
                    </VariableSizeList>
                </VirtualizedTableContext.Provider>
            )}
        </InfiniteLoader>
    </TableBody>
);

As you can see, I am passing children as itemData and the VirtualizedRow will do the following:

const VirtualizedRow = memo(function VirtualizedRow(props: VirtualizedRowProps) {
     const { index, style, data } = props;
     return (
         <div style={style}>
            <VirtualizedChildWrapper index={index}>{data[index]}</VirtualizedChildWrapper>
         </div>
     );
}, areEqual);

The problem I am currently have, is that one children changes (maybe a list item gets selected) then every other items will be rerendered as well. Since it is not possible to memorize children (see: https://gist.github.com/slikts/e224b924612d53c1b61f359cfb962c06), I really don't know how to solve that rerendering issue. Any ideas?

Here is a image of the the rerendering in the F12 Performance panel enter image description here

Jan Höck
  • 219
  • 3
  • 12

0 Answers0