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.