[Help] Deferred promise never resolves in atomEffect

[dmaskasky]

Is this published anywhere?

I think I ran into this 'problem' in the following situation:

1. I had an observable source that could sometimes eventually emit some data.
2. I had an effect that would subscribe to this and 'resolve' a Promise.withResolvers deferred with this data (or 'resolve' with empty data if a timeout passed), and which also handled cleanly unsubscribing, etc.
3. An async atom used this effect and then awaited the deferred.promise so that our React code would attempt to block until it became available.
4. The deferred promise never resolved as the effect was never called.

I could be wrong and my issue may have had nothing to do with this. But, either way, I'd be interested to find out if I could remove the slightly strange logic I wrote to make things work.

[dmaskasky]

Could you make a simple reproduction of this logic in a codesandbox? I'm wrapping this PR up quickly and can test the new build against what you have there.

I think what you have sounds reasonable. Currently, atomEffects have a microtask delay from when their atom dependency changed (e.g the atom was set), to when the effect runs. This PR removes that delay.

But the effect's get and set are already both synchronous. I think you need the deferred promise because you are waiting for next signal, which is reasonable.

So for next steps, let me see what you currently have in a codesandbox.

[dmaskasky]

@dmaskasky Something like this?

https://codesandbox.io/p/sandbox/spring-glade-hvrczc?file=%2Fsrc%2FApp.js%3A31%2C1

Btw, is there any difference between wrapping an atom with withAtomEffect to run effects on mount/unmount of an atom and just using get(someEffect) within the 'read' of an atom? I wonder if I'm just misunderstanding how things are meant to be used sometimes.

[dmaskasky]

Here's what's going on.

1. atomEffect needs to mount in order for it to run.
2. useAtomValue initializes the useReducer with store.get.
3. store.get does not mount atoms.
4. deferredDataAtom awaits deferredAtom and returns a promise.
5. useAtomValue throws this promise which causes React to suspend.
6. React suspends without the atoms mounting.

---

To fix your issue, I recommending mounting atomEffect in a separate useAtomValue hook.

[sebinsua]

Ah, so basically a Jotai Atom isn't mounted until store.sub is run within this useEffect? And this effect isn't run if you have an async atom that never resolves, because of the the suspend from the call to use here?

But if you mount the atom effect separately it still runs? I don't get that because assuming you used them next to each other, wouldn't the suspend from one affect the other.

Is this behaviour of "mount happens after reading the atom" just how things are meant to work?

[dmaskasky]

But if you mount the atom effect separately it still runs? I don't get that because assuming you used them next to each other, wouldn't the suspend from one affect the other.

Oh right, I'm not even sure the useEffect would run before the component suspends. Maybe, placing the atomEffects higher in the tree is the right call. I'm not sure.

[dmaskasky]

withAtomEffect is roughly equivalent to

function withAtomEffect(effect: (get: Getter, set: Setter) => void) {
  const countAtom = atom(0)
  const effectAtom = atomEffect((get, set) => {
    effect(get, set)
  })
  const countWithEffect = atom((get) => {
    get(effectAtom)
    return get(countAtom)
  })
  return countWithEffect
}