I am using VariableSizedList along with the InfiniteLoader and AutoSizer in the following manner
{({ width, height }) => (
<InfiniteLoader
isItemLoaded={isItemLoaded}
itemCount={itemCount}
loadMoreItems={loadMore}
>
{({ onItemsRendered, ref }) => (
<VariableSizeList
itemCount={itemCount}
onItemsRendered={onItemsRendered}
// IMP: ref callback gets created on every render. Plus is it safe to do inner list modifications?
ref={(variableSizeList) => {
if (typeof ref === "function") {
ref(variableSizeList);
}
variableSizeListRef.current = variableSizeList;
}}
estimatedItemSize={getItemSizeForColumnLayoutIfRequired(
estimatedItemSize
)}
itemSize={getListItemSize}
itemData={{ listData, columnView, ...additionalDataProps }}
width={width}
height={height}
itemKey={itemKey}
overscanCount={overScanCount || 5}
outerRef={listContainerRef}
>
{children}
</VariableSizeList>
)}
</InfiniteLoader>
My Scenario: For width > tablet I'm rendering two items in a row, but when the condition fails, I want to render each item one below the other. For this I'm using flex-wrap to get the items one below the other, and at the same time I'm changing the size of each row to accommodate the wrapping.
My Problem: On detecting and setting a state to indicate column view, I'm unable to reset the list without the above ref callback code. Since the ref callback has to be created as an inline function (to set the ref of infinite loader list), the callback is called on every render which is not ideal. Plus I'm not sure if picking the ref of the variable sized list directly and making change to it would impact the working of the infinite list component.
My question: Will by passing the ref like this cause any problems? Is there another way to do it? I could recompute my list and change its structure to match the column view, but that's a bit of a tedious task.
What I have tried:
Took the ref of the infinite list and called its only public method resetloadMoreItemsCache(true); however this does not re-compute the heights of my existing rows.
