In my React Native app I have an infinite scroll (FlatList) and need to be able to search for specific items. Now the problem I have is that I have an onEndReached event that loads in more data which looks like this:
onEndReached={() => { props.fetchOrders('', offset, 10); setOffset(offset + 10);}}
The API call happens and my Redux state gets updated with the orders and the orders then get added to my FlatList with a useEffect hook that depends on the items in the Redux state:
useEffect(() => { if (props.orders.length > 0) { setIsLoading(false); setOrders([...orders, ...props.orders]) } else { setIsLoading(true); }}, [props.orders])
Now in the header component of the FlatList there should be a SearchBar where I can search for specific items which triggers an API call which then updates the Redux state which then triggers my useEffect hook and updates the items in the FlatList. The problem is that with my current useEffect hook my items just get appended to my FlatList instead of overwriting it. Is there a clean solution on how to implement this or is my useEffect method just not suited for my needs?