Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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 ...