title: How append to objects by using useState for infinite scrolling pagination?
body: <p>I'm currently trying to implement an infinite scrolling pagination feature with the <code>useState</code> hook to fetch the next 30 items (objects). The <code>useEffect</code> seen below fetches the first 30 items and sets that to the current state successfully on the web page. However when my <code>fetchMoreListItems()</code> is called to pull the next set of 30 once i've scrolled to the bottom, it doesn't append it to the previous 30 items, instead, the page refreshes and <code>setItems</code> within my <code>fetchMoreListItems()</code> function completely replaces the previous objects with the next ones. I'm trying to find a way to connect the previous state by appending the updated state. Is there a way to go about this? My attempt is seen below:</p>
  <pre><code>const [items, setItems] = useState&lt;Resource&lt;Activities&gt;[]&gt;();
  const [isFetching, setIsFetching] = useState(false);
  
  useEffect(() =&gt; {
      if (!props.resource) return;
      props.resource
        .follow('activities-collection').followAll('item')
        .then(resources =&gt; {
          // this sets the first 30 objects to be displayed
          setItems(resources);
        })
        .catch(err =&gt; console.error('Error fetching resources: ' + err));
    }, [activityResource]);
  
    function fetchMoreListItems() {
      setTimeout(() =&gt; {
        if (!props.resource) return;
        props.resource
          .follow('activities-collection').follow('next').followAll('item')
          .then(resources =&gt; {
           // I would like to append these new objects instead of replacing old ones
            setItems(resources);
          })
          .catch(err =&gt; console.error('Error fetching resources: ' + err));
        setIsFetching(false);
      }, 1000);
    }
  
  </code></pre>