CODEWITHSUNDEEP
reactjsinfinite-scrollreact-virtualizedreact-window
JKhan
JKhan

Reputation: 1287

react-window and infinite loader scrolling issue

I have given an arbitrary number in itemCount because my list length is unknown. When I scroll down, infiniteloader loads the data normally for the first time only. But then it loads after my window view is completely blank.

Let's say my list of array contains 10 items on every fetch. How can I load data as soon as I scroll down and show content in time?

const CARD_SIZE = 265;

class CardList extends PureComponent {

    getItemData = memoize((itemsPerRow, newItems) => ({
        itemsPerRow,
        newItems
    }))


        Row = ({data, index, style }) => {
        const { itemsPerRow, newItems } = data;

        const items = [];
        const fromIndex = index * itemsPerRow;
        const toIndex = Math.min(fromIndex + itemsPerRow, newItems.length);

        for (let i = fromIndex; i < toIndex; i++) {
            items.push(
                <Card 
                key={newItems[i]}
                style={style}
                token={this.props.token}
                disableButton={this.props.disableButton} 
                image={newItems[i]} />
                );
        }
            return (
                <div style={style}>
                {items}
                </div>
            );
        }

    render() {

        const { newItems, loadMore } = this.props;

        return (
            <div style={{marginTop: "10px", height: "100vh" }}>

            <AutoSizer>
            {
                ({ height, width }) => {
                    const itemsPerRow = Math.floor(width / CARD_SIZE) || 1;
                    // const rowCount = Math.ceil(newItems.length / itemsPerRow);
                    const itemData = this.getItemData(itemsPerRow, newItems);

                    return (
              <InfiniteLoader
              isItemLoaded={index => index < newItems.length - 1}
              itemCount={5000}
              loadMoreItems={loadMore}
               >
              {({ onItemsRendered, ref }) => (

                        <List
                        height={height}
                        itemCount={5000}
                        itemData={itemData}
                        itemSize={CARD_SIZE}
                        width={width}
                        overscanCount={1}
                        onItemsRendered={onItemsRendered}
                        ref={ref}
                        >
                        { this.Row }
                        </List>

                        )}
            </InfiniteLoader>

                        )
                }
            }
            </AutoSizer> 
            </div>
            );
    }
}

Upvotes: 1

Views: 15995

Answers (2)

lu4ezar
lu4ezar

Reputation: 91

You've made a couple of mistakes here, so I'm not sure which one causes your issue.
Firstly, you don't need to return an array from Row function, just a single item:

Row = ({index, style}) => <div style={style}>{items[index]}</div>

And do not forget to pass that style prop, otherwise it won't work.

Also, pass function to itemCount, something like this one:

const itemCount = hasNextPage ? items.length + 1 : items.length;

Do not hesitate to refer to the documentation.

Upvotes: 4

user11762683
user11762683

Reputation: 41

I found this link here Virtualize large lists with react-window

It does help, but it can't explain much to what is going on, maybe you can try overscan first. Again, the documentation of react-window-infinite-loader is also unclear on most the things. I did my assignment by fetching data from app-store api, where I have to load 10 more whenever I scroll. But now it is super lagging, and super buggy, I am not sure what to do now, haha.

Upvotes: 4

Related Questions