Can you use async functions in atomEffect?

[shaqq]

I have a React app and I'm developing with Vite and SWC locally.

I'm finding that if I pass an async function into atomEffect like so:

const effect = atomEffect(async () => {
  // doesn't matter what's here
});

// later mounted in a component like so:
useAtom(effect)

And then I save any file in my project, HMR in my app breaks and I get the following error in my browser console:

chunk-GZ55BCQ2.js?v=78bc0757:9145 Uncaught TypeError: t2.cleanup is not a function
    at Object.write (jotai-effect.js?v=78bc0757:19:66)
    at writeAtomState (chunk-LYRAOXYO.js?v=78bc0757:396:26)
    at writeAtom (chunk-LYRAOXYO.js?v=78bc0757:402:20)
    at chunk-LYRAOXYO.js?v=78bc0757:434:48
    at jotai-effect.js?v=78bc0757:22:5
    at unmountAtom (chunk-LYRAOXYO.js?v=78bc0757:449:7)
    at chunk-LYRAOXYO.js?v=78bc0757:466:15
    at Map.forEach (<anonymous>)
    at unmountAtom (chunk-LYRAOXYO.js?v=78bc0757:460:19)
    at delAtom (chunk-LYRAOXYO.js?v=78bc0757:320:7)

No error is found if I take off async in the function passed into atomEffect. I assume something is not expecting a Promise and thus breaking.

I would take a look into the jotai code, but I cannot figure out where atomEffect is defined.

[himself65]

Async function in atomEffect is not supported, and it's by design

See discussion: jotaijs/jotai-effect#10

[shaqq]

Gotcha, thanks for that. Understandably challenging, though some parity with useEffect being able to handle async functions would be great in the future.

[dmaskasky]

But you can still write async code in an atomEffect

atomEffect((get, set) => {
  const count = get(countAtom) // countAtom is an atom dependency
  const abortController = new AbortController()
  ;(async () => {
    try {
      await delay(1000)
      abortController.signal.throwIfAborted()
      get(dataAtom) // dataAtom is not an atom dependency
    } catch (e) {
      if (e instanceof AbortError) {
        // async cleanup logic here
      } else {
        console.error(e)
      }
    }
  })()
  return () => {
    // abort when countAtom changes
    abortController.abort(new AbortError())
  }
})