I've followed the instructions on the infinite loader documentation but I'm still seeing this warning in the console: Invalid list ref; please refer to InfiniteLoader documentation.
My code:
import InfiniteLoader from "react-window-infinite-loader";
const infiniteLoaderRef = useRef<InfiniteLoader>(null);
<InfiniteLoader
isItemLoaded={index => index < items.length}
itemCount={1000}
threshold={20}
loadMoreItems={loadMoreItems}
ref={infiniteLoaderRef}
>
...
</InfiniteLoader>
What am I doing wrong here? Thanks!
Are you passing the ref from the InfiniteLoader
render prop to the FixedSizeList
component?
Yeah this is what I have currently:
<InfiniteLoader
isItemLoaded={index => index < items.length}
itemCount={1000}
threshold={20}
loadMoreItems={loadMoreItems}
ref={infiniteLoaderRef}
>
{({ onItemsRendered, ref }) => (
<AutoSizer style={{ minHeight: "800px" }}>
{({ height, width }) => (
<VariableSizeGrid
columnWidth={_index => width / numberOfColumns}
columnCount={numberOfColumns}
rowCount={Math.ceil(items.length / numberOfColumns)}
rowHeight={_index => heightOfRow}
height={height}
width={width}
ref={ref}
>
{props => <GridItem {...props} />}
</VariableSizeGrid>
)}
</AutoSizer>
)}
</InfiniteLoader>
Can you try swapping InfiniteLoader
and AutoSizer
so that you have AutoSizer
as the outer component?
That worked for me if I remember correctly.
I am having the same issue even though I have the AutoSizer as the outer component
Hi @killpowa, do you have an example I can take a look at?
Hey @chrisneven, Here's the example - codesandbox
Thanks in advance. :)
Hi @DevAKS-Yara,
I've taken a look at your example and you're not passing the ref
from the InfiniteLoader
component to your list component (VirtualTable
), so that's the main reason you get that invalid ref
message.
I've edited your example and implemented a working version
The main take away here is that when you want another reference to the list component and also use the InfiniteLoader
component, you need write a callback function that sets the InfiniteLoader
ref and whatever other references you need. See the setRefs
function in the VirtualTable
component.
Hi @DevAKS-Yara,
I've taken a look at your example and you're not passing the
ref
from theInfiniteLoader
component to your list component (VirtualTable
), so that's the main reason you get thatinvalid ref
message.I've edited your example and implemented a working version
The main take away here is that when you want another reference to the list component and also use the
InfiniteLoader
component, you need write a callback function that sets theInfiniteLoader
ref and whatever other references you need. See thesetRefs
function in theVirtualTable
component.
Oh! I tried passing ref directly from InfiniteLoader
to VirtualTable
but it didn't go well. What's the difference between directly using passed ref and setting up via callback function?
BTW, thanks for the solution! 👍🏼 :)
BTW, thanks for the solution! 👍🏼 :)
You're welcome!
Oh! I tried passing ref directly from
InfiniteLoader
toVirtualTable
but it didn't go well. What's the difference between directly using passed ref and setting up via callback function?
Well you could also directly pass the ref but in this case you apparently need have multiple references. By using a "callback ref" you can assign multiple refs to a DOM node. Preferably you should put it in a useCallback
hook. This ensures that our callback ref doesn’t change between the re-renders.
Most helpful comment
Can you try swapping
InfiniteLoader
andAutoSizer
so that you haveAutoSizer
as the outer component?That worked for me if I remember correctly.