React Hooks state always a step behind - reactjs

Question

Im having trouble resetting page = 1. In the handleSearchClick I have setPage(1) but its one click late, so after the second click page will reset to 1
This is my current code
const [page, setPage] = React.useState(1);
//Other states as well
/**
* Handles event on search click
*/
const handleSearchClick = async () => {
setItems([]);
const database = handleBaseId();
setPage(1);
const items = await fetchSearchPayload(page, value, option, database);
setIsLoading(false);
setItems(items);
};
I also tried resetting page in the button itself but was getting a react limits the number of renders to prevents an infinite loop error message
This is what I tried doing
<SearchBar
onClickButton={handleSearchClick}
onValueChange={handleChange}
value={value}
pageNum={page}
onEnter={handleSearchOnEnter}>
{setPage(1)}
</SearchBar>
I also tried using useEffect and added a count state that increments every time the searchBar is clicked, but I was having trouble with count itself being a step behind.
const [count, setCount] = React.useState(0);
React.useEffect(() => {
setPage(1);
}, [count]);
/**
* Handles event on search click
*/
const handleSearchClick = async () => {
setCount(count+1);
setItems([]);
const database = handleBaseId();
setPage(1);
const items = await fetchSearchPayload(page, value, option, database);
setIsLoading(false);
setItems(items);
};
Any suggestions on how to reset page without any delays are appreciated!

Answer 1

It seems you're attempting to set the page (async) and immediately afterwards use the page state in your fetchSearchPayload call. Considering you're hardcoding always setting the page to 1 there, you could also hardcode the 1 in your fetchSearchPayload call.
Another route you could go is only do the async call when the page has updated by doing something like this:
React.useEffect(() => {
const database = handleBaseId();
const items = await fetchSearchPayload(page, value, option, database);
setIsLoading(false);
setItems(items);
}, [ page ]);
/**
* Handles event on search click
*/
const handleSearchClick = async () => {
setItems([]);
setPage(1);
};

Answer 2

The problem is that state updates are asynchronous with hooks state updater just like setState in react components. The solution is to pass the page manually to function instead of depending on state
/**
* Handles event on search click
*/
const handleSearchClick = async () => {
setItems([]);
const database = handleBaseId();
setPage(1);
const items = await fetchSearchPayload(1, value, option, database);
setIsLoading(false);
setItems(items);
};