How to make an infinite scrolling using 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;

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