Replacing Atom Effects with Synchronous Atom Effects

[dmaskasky]

I'm looking for feedback on a change that replaces Atom Effects (which rely on a microtask delay) with Synchronous Atom Effects (which run in the same task). As with Atom Effects, Synchronous Atom Effects still batch atom updates, but they eliminate the need to wait for the next microtask. They also avoid extra renders and guarantee that they run before store subscriptions (i.e., useAtom, useAtomValue, or atom.onMount). With synchronous atom effects, you have a strong guarantee that the next value will always be correct.

Atom Effect

const countAtom = atom(0)

const effectAtom = atomEffect((get, set) => {
  const count = get(countAtom)
  set(countAtom, 2)
})

const store = createStore()
store.sub(effectAtom, () => {}) // mounts effect
store.set(countAtom, 1)
console.log(store.get(countAtom)) // 1
await Promise.resolve() // wait a microtask
console.log(store.get(countAtom)) // 2

Synchronous Atom Effect

const countAtom = atom(0)

const effectAtom = atomEffect((get, set) => {
  const count = get(countAtom)
  set(countAtom, 2)
})

const store = createStore()
store.sub(effectAtom, () => {}) // mounts effect
store.set(countAtom, 1)
console.log(store.get(countAtom)) // 2

Migration

If you still need to wait a microtask for certain use cases, you can manually queue one with queueMicrotask or Promise.resolve().then

const effect = atomEffect((get, set) => {
  queueMicrotask(() => {
    const countA = get(countAAtom)
    const countB = get(countBAtom)
    set(resultAtom, (prev) => [...prev, `${countA}${countB}`])
  })
})