Not working set atom inside any async function

[VictorPulzz]

Bug Description

I installed the rsbuild template and installed jotai to try to update the state after authorization, but when I use the async function jotai just doesn't update immediately, but only after it is executed, which is completely incorrect since it's not a side effect. When I installed react 19 everything worked, but I don't want to use react 19 because many libraries don't support it yet.
Its really strage bug, such basic things (auth) should be checked by default..

Reproduction Link

https://github.com/VictorPulzz/jota-with-auth-bug

[dai-shi]

Hi, thanks for reporting.
Would you create a smaller reproduction with just one file?
I assume it's not a rsbuild specific issue, so you can modify https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/starter .

[VictorPulzz]

Okay I will create new reproduction in stackblitz

[VictorPulzz]

@dai-shi Hello, thanks for link, I implement example:
https://stackblitz.com/edit/github-ampusuak?file=src%2Findex.tsx
if you check it, you see that redirect dont working after button async function
link: https://githubampusuak-kcc5--5173--1b4252dd.local-corp.webcontainer.io/login

[dai-shi]

if I use not async function, everthing ok

Where is the async function?

[VictorPulzz]

@dai-shi
I think I reproduced the simplest possible example :) Async function const sendRequest = async () => ...

[dai-shi]

It seems like Jotai is doing anything special here. So, I suppose the same behavior could be reproduced with useState without Jotai. If not, the reproduction might be done without router.

[VictorPulzz]

There is strange behavior here in jotai, because when I tried recoil/effector/react context, everything worked as it should, I changed the state, the router picked it up, navigation happened and everything worked..

[rothsandro]

I don't think it's an issue with Jotai here, it's also not working when using React State + Context. If I'm wrong and you have a working sample please share it here.

You update the state used for the Router Context but then navigate before React had time re-render, i.e. before the Router context was actually updated. The beforeLoad of the dashboard route will get the not yet updated context and redirect back to the auth route. A simple solution is to wrap your state update in a flushSync(). Or, as it's not related to Jotai (AFAIK), ask your question in the TanStack Discord channel.