react native pagination with search using flatlist and hook - reactjs

Question

react native search using search key send as parameter for Api call which was text input in search filled and along with it react native pagination using Flatlist and hook , problem faced that i have added data when next page loaded, but during seach key enter it stored its previous value

Answer 1

When you type on input search, you first should reset data state: setData([]).
setData is async and api request also, then, it is possible than reset failed some times.
For this reason, I use flags with useRef, to write and read value synchronous way, example:
const resetData = useRef(false)
when type on filter:
resetData.current=true
and on .then api req:
if(resetData.current){
setData(response.data);
resetData.current = false
}
else{
setData([...data,response.data])
}
Edit(after your comments):
import React, { useState, useEffect, useRef } from "react";
//..other imports
function App() {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [searchKey, setSearchKey] = useState();
const resetData = useRef(false);
const getData = () => {
let pageToReq = page;
if (resetData.current) {
pageToReq = 0;
}
const headers = { Authorization: "token" };
axios
.get("baseurl" + "getdata?page=" + pageToReq, { searchingKey: searchKey })
.then(async function (response) {
if (resetData.current) {
setData(response.data);
resetData.current = false;
} else {
setData([...data, ...response.data]);
}
})
.catch(function (error) {
console.log(error);
});
};
useEffect(() => {
getData();
}, [page, searchKey]);
const handleOnChangeText = (val) => {
resetData.current = true;
setSearchKey(val);
};
const handleOnEnd = () => {
if (resetData.current) {
return;
}
setPage(page + 1);
};
return (
<View>
<TextInput onChangeText={handleOnChangeText} />
<FlatList
data={data}
onEnd={handleOnEnd}
onEndReachThreshold={0.1}
></FlatList>
</View>
);
}
export default App;