How to make an infinite scrolling using ReactJs - reactjs

Question

I want to make an infinite scrolling. The idea is next, when user scroll at the bottom of the scroll area, the http request should occur and to add data to the previous, that exists before. In this way the user if will scroll back to the top will be able to see all options.
For this i created:
import React, { useState } from "react";
import AsyncSelect from "react-select/async";
const WithPromises = () => {
const [page, setPage] = useState(1);
const [allData, setAllData] = useState([]); //here should be added all data
const filterData = (inputValue) => {
const req = fetch(
`https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${page}`
)
.then((response) => response.json())
.then((res) => {
console.log(res, "data");
return res.map(({ title }) => {
return {
label: title,
value: title
};
});
});
return req;
};
const promiseOptions = (inputValue) => {
return filterData(inputValue);
};
const scroll = (e) => {
setPage(page + 1); //when scroll is at the bottom
};
console.log(page);
return (
<AsyncSelect
cacheOptions
onMenuScrollToBottom={scroll}
isClearable={true}
isSearchable={true}
defaultOptions
loadOptions={promiseOptions}
/>
);
};
export default WithPromises;
How you can see i increment the page every time the user is at the bottom of the scroll area.
setPage(page + 1). The value is added in the request.
Question: How to achieve what i decsribed above? When i will scroll down the new values should be added in the whole list and to be saved there and if i will scroll again at the boottm the the page should change and again new data should be added in the whole list.
demo: https://codesandbox.io/s/codesandboxer-example-forked-zsj6i?file=/example.js:0-1070

Answer 1

react-virtualized have an InfiniteLoader HOC which you can use for the implementation of your infinite scrolling menu, let me give you an pseudocode:
function App() {
const [items, setItems] = React.useState([]);
const [rowCount, setRowCount] = React.useState(0);
const rowRenderer = ({ key, index, style }) => (
<div key={key} style={style}>
{items[index]}
</div>
);
const isRowLoaded = ({ index }) => {
return !!items[index];
};
const loadMore = ({ startIndex, stopIndex }) => {
fetch(`https://blahblahblah.com/getData?from=${startIndex}&to=${stopIndex}`)
.then((res) => res.json)
.then((response) => {
setRowCount(response.data.count); //number of results!
return response.data.items.map(({ title }) => ({
label: title,
value: title,
}));
})
.then((formattedData) => setItems((prev) => [...prev, formattedData])); //add new datas to the previous list
};
return (
<InfiniteLoader
isRowLoaded={isRowLoaded}
loadMoreRows={loadMore}
rowCount={rowCount}>
{({ onRowsRendered }) => (
<List
onRowsRendered={onRowsRendered}
rowCount={rowCount}
rowRenderer={rowRenderer}
/>
)}
</InfiniteLoader>
);
}