This is because React doesn't rely on an async task like that, there are two ways to simulate the result you want. One I'm going to call standard and one unstable version.
Unstable version
The first way is to wrap updates inside unstable_batchedUpdates
callback. As the name suggests, this API will batch your updates in a single reconciliation pass, resulting in fewer component renders.
So the updated code will be something like:
import { unstable_batchedUpdates } from "react-dom";
const updateMyBiddingList = async (atDate?: string) => {
try {
console.log('step 0');
const result = await getBiddingCartFromService(atDate ? atDate : myBiddingListState.myBiddingList[0].updatedAt);
// Add unstable API where you cause re-render ⭐
unstable_batchedUpdates(() => {
if (result.responseCode.toString().startsWith('2')) {
setAAA(true);
console.log('step 1');
}
console.log('step 2 ', aaa);
})
}
catch (err) {
if (timeOut.current) clearTimeout(timeOut.current);
timeOut.current = setTimeout(() => updateMyBiddingList(), TIMEOUT);
}
}
This will change the order of the logs to this
Component is re-rendering... false
step 0
step 1
step 2 false
Component is re-rendering... true
you can see code running with fake data from JSON placeholder in the following code sandbox.

Standard version (react common pattern)
It is not the only pattern you can do what you want, but it seems more react-ish like to me :)
- you are requesting (an async action)
- you want to change the state of the component that will cause re-render
this phase also change function definition for the very next render
- you want to re-fetch on failure
I'm sticking to your implementation and don't want to split useEffect
sections into tiny reusable parts, although it might be something you want to think about it.
The solution is to move your logic where it belongs, which means where you are going to call that function call in your dom tree.
// instead of aaa and setAAA :)
const [updated, setUpdated] = useState<boolean>(false)
const [hasError, setHasError] = useState<boolean>(false)
const timeOut = useRef<number>()
useEffect(() => {
const updateMyBiddingList = async (atDate?: string) => {
try {
console.log('step 0');
const result = await getBiddingCartFromService(atDate ? atDate : myBiddingListState.myBiddingList[0].updatedAt);
setHasError(false)
if (result.responseCode.toString().startsWith('2')) {
setUpdated(true);
console.log('step 1');
}
console.log('step 2 ', updated);
}
catch (err) {
setHasError(true)
if (timeOut.current) clearTimeout(timeOut.current);
timeOut.current = setTimeout(() => updateMyBiddingList(), TIMEOUT);
}
}
if (!updated || hasError) updateMyBiddingList()
// timeOut.current can also be added here but it is not recommended
}, [updated, hasError])