[SOLVED] React virtualized doesn't work with auto sizer and infinite loader

React virtualized doesn't work with auto sizer and infinite loader

I'd like to virtualize a large list in my react application and use react-virtualized-auto-sizer and react-window-infinite-loader packages. Below is how I did it.

import { FixedSizeList as List } from 'react-window'
import InfiniteLoader from 'react-window-infinite-loader'
import AutoSizer from 'react-virtualized-auto-sizer'

<AutoSizer>
  {({ height, width }) => (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={10}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <List
          className="List"
          outerElementType="section"
          innerElementType="ol"
          height={height}
          itemCount={10}
          itemSize={75}
          overscanCount={4}
          onItemsRendered={onItemsRendered}
          ref={ref}
          width={width}
        >
          {Row}
        </List>
      )}
        </InfiniteLoader>
      )}
</AutoSizer>

But it displays nothing on the screen. If I remove the usage of AutoSizer, then it works as expected.

You can check the behavior here: https://codesandbox.io/s/react-window-ep2rz3?file=/src/App.js:524-1261

I really appreciate any help!!

Solution

Sorry I will make a better answer here : I think it's because the parent of Autosizer needs an height make it work.

See the docs: https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#why-is-my-autosizer-setting-a-height-of-0

If you force your .App container to a fixed height, you will see your list