reactjs - Use spread operator to combine multiple arrays fetching data in React JS

Question

I want to implement something like infinity scrolling on my application. This is my code:

import React, { useState, useEffect } 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 [scrolll, setScrolll] = useState();
  const filterData = (inputValue) => {
    const req = fetch(
      `https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${page}`
    )
      .then((response) => response.json())
      .then((res) => {
        const fetchedData = res.map(({ title }) => {
          return {
            label: title,
            value: title
          };
        });
        page > 1 && setAllData([...allData, ...fetchedData]);
        return [...fetchedData, allData];
      });
    return req;
  };

  const promiseOptions = (inputValue) => {
    return filterData(inputValue);
  };

  const scroll = (e) => {
    console.log(e);
    setScrolll(e);
    promiseOptions();
  };

  useEffect(() => {
    setPage(page + 1);
  }, [scrolll, page]);

  return (
    <AsyncSelect
      cacheOptions
      onMenuScrollToBottom={scroll}
      isClearable={true}
      isSearchable={true}
      defaultOptions
      loadOptions={promiseOptions}
    />
  );
};

export default WithPromises;

Answer 1

import React, { useState, useEffect } from "react";

import AsyncSelect from "react-select/async";

const WithPromises = () => {
  const [page, setPage] = useState(1);
  const [items, onItemsChange] = useState([]);

  useEffect(() => {
    fetchData(page);
  }, [page]);

  const fetchData = async (pageIdx) => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/todos?_limit=15&_page=${pageIdx}`
    ).then((r) => r.json());
    const resItems = res.map(({ title }) => ({
      label: title,
      value: title
    }));
    onItemsChange([...items, ...resItems]);
  };

  const loadOptions = () => items;

  // for search functionality use something like this:
  // const loadOptions = async (inputStr) => {
  //   const searchRes = await fetch(`${yourUrl}?search=${inputStr}`).then(r => r.json());
  //   return searchRes;
  // };

  const handleBottomScroll = () => {
    setPage((prevVal) => prevVal + 1);
  };

  return (
    <AsyncSelect
      cacheOptions
      isClearable={true}
      isSearchable={true}
      defaultOptions={items}
      onMenuScrollToBottom={handleBottomScroll}
      loadOptions={loadOptions}
    />
  );
};

export default WithPromises;