React native setState value before fetch - react-native

Question

In react native code, I have a 2 state for example.
const [data, setData] = useState([]);
const [page, setPage] = useState(0);
When call a function, ie search function
search = async() => {
setData([]);
setPage(0);
console.log("Page: " + page); // This will return 0 because of the setPage(0) above, or can call setPage((state)) to wait until page set to 0
}
If multiple time call search function above, the page will be 0. It is expected.
But if this code continue,
search = async() => {
setData([]);
setPage(0);
console.log("Page: " + page); // This page will be always increment because fetch then setPage+1 above
fetch(url)
.then((response) => response.json())
.then((json) => { setData(data.concat(json.content)); setPage(page+1); })
.catch((error) => console.error(error))
.finally(() => { });
}
The log will be
Page: 1
Page: 2
Page: 3
Which the expected should be always Page: 0
The question is, how to set the page become 0, then fetch url so before fetch the value is always 0. The objective is very simple, when this search function triggered, the page must be 0 then fetch the data again.

Answer 1

Since you always want your page to be 0 always before fetch which means setPage(page+1); should make page 1 ,then here is what you can do:
search = async() => {
setData([]);
fetch(url)
.then((response) => response.json())
.then((json) => { setData(data.concat(json.content)); setPage(1); })
.catch((error) => console.error(error))
.finally(() => { });
}
directly assign page to be 1 instead of doing page+1.
EDIT
const[start,setStart]=useState(false);
useEffect(()=>{
if(start){
setPage(0);
setData([]);
}
},[start])
search = async() => {
setStart(true);
console.log("Page: " + page); // This page will be always increment because fetch then setPage+1 above
fetch(url)
.then((response) => response.json())
.then((json) => { setData(data.concat(json.content)); setPage(page+1); })
.catch((error) => console.error(error))
.finally(() => { });
setStart(false);
}