Async Callback provided within a callback doesn't get executed

[stavansanghvi]

Hello There!

I recently migrated a Class Component to a Function Component where there was a feature that called a function to process the data and had an update to the state with a callback (using this.setState). To provide callbacks to the function after the state is updated, I tried using the useStateWithCallbackLazy() hook.

Suppose we have a Function A that processes the data and updates the state, wherein the callback was called Callback A. Callback A was executed successfully, so I updated the state again with the newly processed values and provided a Callback B.

Now here starts the problem, If I update the state from Function A and execute Callback A, it will be reset to Function A's. When the state updates from Callback A and the execution stops there, Callback B will not execute.

I have created a demo to illustrate the issue.

https://codesandbox.io/s/usestatewithcallbacklazy-ll4oj