How to get the changed state after an async action, using React functional hooks

You can use a ref to keep track of the counter value independently

 const [counter, setCounter] = useState(0);
 const counterRef = useRef(counter)

Whenever you update counter you update counterRef as well:

const newCounter = counter + 1
setCounter(newCounter);
counterRef.current = newCounter

And then check it:

if (counterRef.current !== counter) {
   alert("counter was changed");
} else {
   setAsyncCounter(counter);
}

Codesandox

Related