Bug: Unexpected automatic batching behavior?

When running a heavy computation between two "setState" in a `useEffect`, one being out of a `setTimeout` and the other inside it, React does not re-render twice. This is a problem because it prevents us from showing a "loading state" to the user while the heavy computation is running. React version: `18.2.0` ## Steps To Reproduce See [this](https://codesandbox.io/s/practical-dew-qkfy29?file=/src/App.tsx) sandbox. ## Main part of the sandbox code ```ts useEffect(() => { setData(undefined); setTimeout(() => { const res = slowFibonacci(counter); setData({ res }); }); }, [counter]); ``` ## The current behavior It changes depending on some things I'm unfortunately not sure about. Sometimes the loading state is correctly showed on mount, sometimes it's on update. Sometimes the loading state displays smoothly, sometimes it seems that it is stuck mid-render (I don't know this for a fact). And finally some other times, the loading state is not displayed at all, and the component is only rendered once the computation is done. ## The expected behavior I'd expect this code to behave as described in [this](https://github.com/reactwg/react-18/discussions/21#discussioncomment-1565892) comment from the _"Automatic batching for fewer renders in React 18"_ discussion on the [React 18 repo](https://github.com/reactwg/react-18) of the React Working Group: > The updates outside setTimeout will be batched together and updates inside setTimeout will be batched together separately so it will be 2 separate renders. Thanks to @gaearon for taking a look at this beforehand and suggesting to submit this issue.