Issue with state change timing? (preact + react-query)

I have a pretty interesting issue that I stumbled upon when trying to swap recoil with jotai. I am still not sure if I am posting this to the right repo as this bug might be in something else. It happens for me when using preact, react-query, and jotai, but works fine with recoil.

I prepared a simple reproduction of this bug, but first here is how it should behave: https://codesandbox.io/s/react-react-query-jotai-fwhj3 (react + react-query + jotai)

You should be able to go through three steps and then back to the beginning. There is an async function executed before going from one step to another that in the reproduction is just a Promise that resolves after 1 second.

Here is a similar app that uses preact instead of react and recoil instead of jotai: https://codesandbox.io/s/preact-react-query-recoil-sd8pu

And here is the reproduction of the bug which happens only with preact, react-query, and jotai: https://codesandbox.io/s/preact-react-query-jotai-5nsfu

As you can hopefully see, after the async function resolves and the second step is shown, the button in the second step is disabled as the useIsMutating function still thinks that there is a mutation running.

It looks like the second step’s logic is run after the setPage triggers the change of the currently displayed step, and after that is done the component is displayed with the old data.

This might be an issue in preact, but why does it work with recoil and does not with jotai?

[dai-shi]

With latest versions, it behaves still the same: https://codesandbox.io/s/preact-react-query-jotai-forked-u36uoe

However, recoil one also behaves the same with latest versions: https://codesandbox.io/s/preact-react-query-recoil-forked-klowl7

So, I’d assume the issue is not on our end, but on preact(-compat). Closing.

[dai-shi]

Let’s keep this open for some more time, but it’s likely we close this eventually unless someone works on it.