title: How to create a flatlist with infinite scroll with local data? (Possible useState misuse)
body: <p>I have a problem trying to create a FlatList with infinite scroll using local data. I want the list to load 20 different elements every time it reaches the bottom. Here is the list:</p>
  <pre><code>                &lt;FlatList
                    contentContainerStyle={styles.airportLatestSearchlist}
                    data={filteredAirportList}
                    renderItem={renderAirportItem}
                    keyExtractor={(item) =&gt;
                      filteredAirportList.indexOf(item).toString()
                    }
                    onEndReached={increaseTotalFilteredResults}
                    onEndReachedThreshold={0.1}
                  /&gt;
  </code></pre>
  <p>The data <strong>filteredAirportList</strong> is loaded once the user starts typing in the search box. This is the function that filters the data which is already stored.</p>
  <pre><code>  const filterAirportSearch = (value) =&gt; {
      const managedValue = value.toLowerCase();
      const filteringAirports = airportList.filter(
        (airport) =&gt;
          airport.airport_name?.toLowerCase().includes(managedValue) ||
          airport.city?.toLowerCase().includes(managedValue) ||
          airport.country?.toLowerCase().includes(managedValue) ||
          airport.icao?.toLowerCase().includes(managedValue) ||
          airport.iata?.toLowerCase().includes(managedValue),
      );
      var numberListHelper = filteringAirports;
      numberListHelper.length = numberElementsList;
      setTotalFilteredAirportList(filteringAirports);
      setFilteredAirportList(numberListHelper);
    };
  </code></pre>
  <p>And this is the function that is called once the user scrolls to the bottom:</p>
  <pre><code>  const increaseTotalFilteredResults = () =&gt; {
      let numberHelper = numberElementsList;
      if (numberHelper &lt; totalFilteredAirportList.length) {
        numberHelper = numberElementsList + 20;
      }
      setNumberElementsList(numberHelper);
  
      if (Object.keys(totalFilteredAirportList).length &gt; 0) {
        let filteredListUpdate = totalFilteredAirportList;
        filteredListUpdate.length = numberHelper;
        setFilteredAirportList(filteredListUpdate);
      }
    };
  </code></pre>
  <p>However, every time that this function is called:</p>
  <blockquote>
  <p>numberListHelper.length = numberElementsList;</p>
  </blockquote>
  <p>It changes the length for the <strong>filteringAirports</strong> state as well and I can't load the rest of the data. Is it actually a bug or am I changing directly by a reference?</p>
  <p>Here is a visual part of the problem.</p>
  <p><strong>Before .length is called</strong>
  <a href="https://i.stack.imgur.com/pNTHi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pNTHi.png" alt="Before .length is called" /></a></p>
  <p><strong>After .length is called</strong>
  <a href="https://i.stack.imgur.com/LnAJB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LnAJB.png" alt="After .length is called" /></a></p>
  <p>Thanks!</p>