react-window-infinite-loader: Invalid list ref

See original GitHub issue

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!

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:9

Top GitHub Comments

27reactions

chrisnevencommented, Mar 26, 2020

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

That worked for me if I remember correctly.

6reactions

killpowacommented, Aug 26, 2020

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

Top Results From Across the Web

react-window and infinite loader scrolling issue - Stack Overflow

When I scroll down, infiniteloader loads the data normally for the first time only. But then it loads after my window view is...

react-window-infinite-loader - npm

Function responsible for tracking the loaded state of each item. itemCount, number, Number of rows in list; can be arbitrary high number if ......

react-window-infinite-loader - npm package - Snyk

Learn more about react-window-infinite-loader: package health score, ... For example, after a list has been sorted, previously cached items may be invalid.

React-window-infinite-loader - npm.io

Name, Type, Description. children, ({ onItemsRendered: Function, ref: React$Ref }) => React$Node, Render prop. See below for example usage.

Virtualize large lists with react-window - web.dev

In here, the FixedSizeList component is wrapped within the InfiniteLoader . The props assigned to the loader are: isItemLoaded : Method that ...