1

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>
   )
}

1 Answers1

0

I figured out the problem. The Key I was giving to the component was dynamic and changed with the loading of data(with data.length). Which rendered the whole list and caused it to scroll to top. Giving proper key fixed the issue