I am trying to do infinite scrolling with react-window-infinite-loader and everytime an item is loaded the scroll gets back to the top. So if I am 100 items down the list and more data gets loaded, I reach back to the top and have to start again. This is the code I am trying with
const isItemLoaded = itemsCount => index => {
return (itemsCount -index) > 5;
}
//arbitrary high number
const itemCount = 10000000;
function loader(props) => {
const [data, setData] = useState([]);
const loadMoreData= async () => {
const payload = await callApi(//with proper params)
setData(data => [...data,...payload.data]
}
return(
<AutoSizer >
{({ height, width }) => (
<InfiniteLoader
isItemLoaded={isItemLoaded(leadCount)}
itemCount={itemCount}
loadMoreItems={loadMoreItems}
>
{({ onItemsRendered, ref }) => (
<List
key={`${width}${height}${data.length}`}
height={height}
width={width}
itemCount={data.length}
itemSize={162}
onItemsRendered={onItemsRendered}
ref={ref}
>
{({ index, style }) => (
<div style={style}>
<DataCard
key={'visitor_' + index}
{...data[index]}
/>
</div>
)}
</List>
)}
</InfiniteLoader>
)}
</AutoSizer>
)
}