react useState don't update properly when it's called inside callback - reactjs

Question

I am going to count loaded apis. I used function component.
function Screen(props) {
const [count, setCount] = useState(0)
useEffect(() => {
loadData();
() => { return null; }
}, [])
const loadData = () => {
axios({ url: API_BASE_URL + 'countries', method: 'get' }).then((res)=>{
setCount(count+1)
})
axios({ url: API_BASE_URL + 'regions', method: 'get' }).then((res)=>{
setCount(count+1)
})
}
useEffect(() => {
console.info(count) // this shows 0, 1, it never be 2
}, [count])
return <div></div>
}
what's wrong with my code? I think it should print 2 at last
Thanks

Answer 1

count is captured as 0 by the closures you pass to then. Effectively you're calling setCount(0 + 1). A very thorough explanation can be found here: https://overreacted.io/a-complete-guide-to-useeffect/
Here's an updated version of your code, that fixes the issues:
import React, { useCallback, useEffect, useState } from 'react';
const fakeApi = (delay = 400, val = null): Promise<typeof val> => new Promise(resolve => {
setTimeout(resolve, delay, val);
});
const Count: React.FC = () => {
const [count, setCount] = useState(0);
const loadData = useCallback(() => {
fakeApi(1000).then(() => {
setCount(count => count + 1); // use the function form of setState to get the current state value without being *dependent* on it.
});
fakeApi(2000).then(() => {
setCount(count => count + 1); // same as above.
});
}, []); // no dependencies => loadData is constant
useEffect(() => {
loadData();
}, [loadData]); // dependent on loadData, but that changes only once (first render, see above).
// note: you could move loadData inside the effect to reduce some code noise. Example:
//
// useEffect(() => {
// const loadData = () => {
// fakeApi(1000).then(() => {
// setCount(count => count + 1);
// });
//
// fakeApi(2000).then(() => {
// setCount(count => count + 1);
// });
// };
//
// loadData();
// }, []);
return (
<div>{count}</div>
);
};
export default Count;
Demo: https://codesandbox.io/s/focused-sun-0cz6u?file=/src/App.tsx