Caution when using async effects

[dmaskasky]

UPDATE: PR #12 removes async effects.

loadable and async iffe with AbortController are some good ways to implement async effects.

Here is an example
https://codesandbox.io/s/epic-nash-pqkfvj

This is the conclusion to the following discussion.

---

When React hooks came out, there were many who felt that useEffect should support async callbacks. I was one of them.

useEffect(async () => {
  ...
  return () => {}
}, [])

When starting jotai-effect, I thought it was pretty obvious to add support for async effects but didn't yet understand the caveats. As I understood this more, I realized it is important to teach caution when using async atomEffects.

atomEffect(async (get, set) => {
  ...
  return () => {}
})

1. dependencies are calculated on resolve of the returned promise

This is a big one. If you have an effect that gets an atom's value and it returns a promise, Jotai does not actually know of the effect's dependencies until the promise has resolved.

const countAtom = atom(0)
const processedAtom = atom(0)

const syncProcessedWithCount = atomEffect(async (get, set) => {
  set(processedAtom, get(countAtom))
  await new Promise(resolve => setTimeout(resolve, 1_000))
})

function MyComponent() {
  useAtom(syncProcessedWithCount)
  const [count, setCount] = useAtom(countAtom)
  const [processedCount] = useAtom(processedAtom)

  return <>{JSON.stringify({ count, processedCount })}</>
}

// t=0:   { count: 0, processedCount: 0 }
// t=500: (button click increments count)
//        { count: 1, processedCount: 0 } // did not fire

Above, syncProcessedWithCount will not respond to changes to count until after 1 second. This is also standard behavior in Jotai atom read functions.

2. subsequent runs are aborted until the current run finishes

If the current run is still in progress when dependencies change, the change will be ignored.

const countAtom = atom(0)
const processedAtom = atom(0)

const syncProcessedWithCount = atomEffect(async (get, set) => {
  set(processedAtom, get(countAtom))
  await new Promise(resolve => setTimeout(resolve, 1_000))
})

function MyComponent() {
  useAtom(syncProcessedWithCount)
  const [count, setCount] = useAtom(countAtom)
  const [processedCount] = useAtom(processedAtom)

  return <>{JSON.stringify({ count, processedCount })}</>
}

// t=1_100: (button click increments count)
// { count: 1, processedCount: 1 }
// t=1_200: (button click increments count)
// { count: 2, processedCount: 1 } // change ignored

3. dependencies are computed on returned promise resolve

Getting atoms with get in an atomEffect adds those dependencies to Jotai. Atom dependencies are evaluated when the returned promise resolves. Getting atoms after the returned promise has resolved does not add them as atom dependencies.

atomEffect(async (get, set) => {
  setTimeout(() => {
    get(countAtom) // is not added as a dependency
  }, 1_000) // 1s
  await new Promise(resolve => setTimeout(resolve, 500)) // 0.5s
})

⚠️ Be careful when using async effects ⚠️

[dai-shi]

I think we should drop async effect support for now to avoid such confusions. So, follow useEffect.
Users can start async effect internally with abort controller.

const anEffect = atomEffect((get, set) => {
  const count = get(countAtom)
  const controller = new AbortController()
  (async () => {
    const res = await fetch('/foo/' + count, { signal: controller.signal })
    if (controller.signal.aborted)  return
    const data = await res.json()
    if (controller.signal.aborted)  return
    set(resultAtom, data)
  })()
  return () => {
    controller.abort()
  }
})

[dmaskasky]

Yes and loadable util makes it easy for users who still have an async use-case.
https://codesandbox.io/s/epic-nash-pqkfvj

PR: #12

[dmaskasky]

loadable is the alternative to async effects

https://codesandbox.io/s/epic-nash-pqkfvj