React 19 causing useAtomValue + atomWithObservable to re-suspense on new value

[tien]

This started happening with React 19 & I have to introduce a delay of 0 (queue macrotask) like so to resolve it:

useAtomValue(someAtom, { delay: 0 })

I will work on a shareable reproduction.

[dai-shi]

Thanks for reporting. Yeah, a repro with https://stackblitz.com would be helpful.

[dhruvkelawala]

Hello, do you have any updates for this issue? Seems like I am facing the same

[dhruvkelawala]

Not sure what { delay: 0 } does as I couldn't find it in docs but it seemed to have worked. I am 100% sure now this is the issue I was facing. However, unable to create a reproduction with a simple example.

[dai-shi]

{ delay: 0 } is a hack of this kind of issues, but in a long term, we should look for a proper solution. It's fine to use it meanwhile.

However, unable to create a reproduction with a simple example.

Hmm, at least a reproduction or ideally a test case is necessary for someone to fix...

[dhruvkelawala]

Yes, I'll keep trying. In our codebase,

import { liveQuery } from "dexie"
import { atomWithObservable } from "jotai/utils"

export const atomFromQuery = <T>(querier: () => T | Promise<T>) =>
  atomWithObservable(() => liveQuery(querier))

This causes the re-suspense issue without delay: 0.

[dhruvkelawala]

And it was not in react 18. Below is the example with react 19

Screen.Recording.2024-12-27.at.11.21.19.mov

[dhruvkelawala]

Hello, was there any update to this issue?

[dai-shi]

Is it possible to reproduce the bug without dexie dependency?
Your help would be necessary to create a failing test case.

[dhruvkelawala]

Hi, I spent yesterday trying to reproduce the issue. But on simple stackblitz app with/without dexie, I was unable to reproduce it. But it feels like if multiple atoms are nested and produces multiple promises, this can happen. However, I am really unsure how to reproduce it.

[tien]

@dai-shi I was finally able to reproduce it:

Issue happening on React 19: https://codesandbox.io/p/sandbox/loving-cache-djlkzp
Same issue doesn't happen for React 18: https://codesandbox.io/p/devbox/loving-cache-forked-vr3g3s

[tien]

Also should I create an issue for this? Or is this expected?

Using delay: 0 also works, but it introduced another issue where useTransition no longer works with useAtomValue for some reason.

[tien]

This is a separate discussion, but with React 19 changes to how suspend works, I feels like using promise is no longer optimal cuz of the fixed 300ms delay :( (but this might be something that React need to fix)

[dai-shi]

Using delay: 0 also works, but it introduced another issue where useTransition no longer works with useAtomValue for some reason.

It works, but isn't in transition, right. It's totally expected, and it's why it's not the default behavior.

I feels like using promise is no longer optimal

For our end, I'd recommend jotai-derive to avoid unnecessary suspense. Also, does using useTransition reduce triggering suspense?

[tien]

• Yeah I feel like for React 19 it's always best to use jotai-derive now.
• Not really, useTransition is just something that I noticed didn't work with delay.

[dai-shi]

• Not really, useTransition is just something that I noticed didn't work with delay.

Can be something I'm not aware of. A minimal stackblitz reproduction would be helpful.