Bug: effect runs with stale state values outside of Concurrent React about react

[spencersablan]

Hey @denis-sokolov! 👋 In your first example, it seems like the component is rerendering due to the <StrictMode> wrapper in index.js. This will cause each component, and any effects, to rerender an extra time. See the strict mode docs here.

As for your larger reproduction example, things get really interesting... Some things to note right off the bat:

• React state updates are batched & asynchronous (both useState & useReducer).
• queueMicrotask will trigger the task after all synchronous tasks are complete.
• useEffect without a second argument will trigger the callback every time the component renders.

So this is what I think is going on: when you click the button, it is rerendering the component. When the microtask is setup in the first useEffect, that's going to always take precedence over any state updates. So even though you're calling setState(true) in the second useEffect, its not actually getting executed until there are no more microtasks scheduled.

To demonstrate this, you can remove queueMicrotask and just call rerender(). This would cause React to batch the rerender() call with setDone(true), ensuring they both get executed during the first re-render. 😄