[NEED HELP] fetching issue for Infiniteloader with FixedSizeGrid

[HaruMiyaGi]

Basically the issue is that the loadMoreItems function inside InfiniteLoader does not always trigger.

From my understanding this issue only occurs when you fetch and add less item data than the columnCount value.

I have no idea why this happens, I suspect it has something to do with the onItemsRendered function inside FixedSizeGrid, but I have no clue.

Here's my code implementation:

import { useState } from 'react'
import InfiniteLoader from 'react-window-infinite-loader'
import { FixedSizeGrid } from 'react-window'

export default () => {
    const [ITEMS, setITEMS] = useState(() => [])
    const [loadMore, setLoadMore] = useState(() => true)

    const fetchItems = async () => {
        console.log('fetching...')
        setTimeout(() => {
            const data = [1] // THIS WORKS BUT NEVER CALLS fetchItems AGAIN
            // const data = [1, 1] // WHERE AS THIS WORKS EXACTLY AS EXPECTED
            // const data = [1, 1, 1] // AND THIS WORKS AS EXPECTED

            setITEMS((prev) => prev.concat(data))
        }, 500)
    }

    const COLUMNS = 2

    return (
        <>
            <InfiniteLoader
                itemCount={loadMore ? ITEMS.length + 1 : ITEMS.length} //
                isItemLoaded={(index) => index < ITEMS.length}
                loadMoreItems={fetchItems}
            >
                {({ onItemsRendered, ref }) => (
                    <FixedSizeGrid
                        width={500}
                        height={500}
                        columnCount={COLUMNS}
                        rowCount={Math.ceil((loadMore ? ITEMS.length + 1 : ITEMS.length) / COLUMNS)}
                        columnWidth={250}
                        rowHeight={250}
                        ref={ref}
                        // onItemsRendered={(props) =>
                        //  onItemsRendered({
                        //      overscanStartIndex: props.overscanRowStartIndex * COLUMNS + props.overscanColumnStartIndex,
                        //      overscanStopIndex: props.overscanRowStopIndex * COLUMNS + props.overscanColumnStopIndex,
                        //      visibleStartIndex: props.visibleRowStartIndex * COLUMNS + props.visibleColumnStartIndex,
                        //      visibleStopIndex: props.visibleRowStopIndex * COLUMNS + props.visibleColumnStopIndex,
                        //  })
                        // }
                        onItemsRendered={(gridData) => {
                            const { visibleRowStartIndex, visibleRowStopIndex, visibleColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, overscanColumnStopIndex } = gridData

                            const overscanStartIndex = overscanRowStartIndex * (overscanColumnStopIndex + 1)
                            const overscanStopIndex = overscanRowStopIndex * (overscanColumnStopIndex + 1)
                            const visibleStartIndex = visibleRowStartIndex * (visibleColumnStopIndex + 1)
                            const visibleStopIndex = visibleRowStopIndex * (visibleColumnStopIndex + 1)

                            onItemsRendered({ overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex })
                        }}
                    >
                        {({ columnIndex, rowIndex, style }) => <div style={style}>{rowIndex * COLUMNS + columnIndex}</div>}
                    </FixedSizeGrid>
                )}
            </InfiniteLoader>
        </>
    )
}

[lindaJNlinda]

i have the same question, request failed in loadMoreItems function, but loadMoreItems not trigger again.

how you resolve your problem ?

[vishwakanth183]

I am too encountering the same problem. loadMoreItems works fine with the infiniteLoader and FixedSizeList while it is not working out for FixedSizeGrid.

[umagon]

I am too encountering the same problem. loadMoreItems works fine with the infiniteLoader and FixedSizeList while it is not working out for FixedSizeGrid.

Same here

[umagon]

@bvaughn what was the solution for this?