react-window-infinite-loader: Invalid list ref

[jackbot]

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!

[chrisneven]

Are you passing the ref from the InfiniteLoader render prop to the FixedSizeList component?

[jackbot]

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>

[chrisneven]

Can you try swapping InfiniteLoader and AutoSizer so that you have AutoSizer as the outer component?

That worked for me if I remember correctly.

[killpowa]

I am having the same issue even though I have the AutoSizer as the outer component

[chrisneven]

Hi @killpowa, do you have an example I can take a look at?

[DevAKS-Yara]

Hey @chrisneven, Here's the example - codesandbox

Thanks in advance. :)

[chrisneven]

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.

[DevAKS-Yara]

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.

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! 👍🏼 :)

[chrisneven]

BTW, thanks for the solution! 👍🏼 :)

You're welcome!

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?

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.