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}`])
  })
})

[dhenneke]

@dmaskasky We have an issue after the upgrade to 2.0.1 which I don't quite get.

The following code works properly in 1.1.6:

import { renderHook, waitFor } from '@testing-library/react'
import { atom, useAtomValue } from 'jotai'
import { withAtomEffect } from 'jotai-effect'

const searchParamsAtom = withAtomEffect(atom({}), (_get, set) => {
    // ... some irrelevant logic here ...

    set(searchParamsAtom, { initial: true })
})

const myParamsAtom = withAtomEffect(atom<{ initial?: boolean }>({}), (get, set) => {
    const searchParams = get(searchParamsAtom)

    // ... some irrelevant logic here ...

    set(myParamsAtom, searchParams)
})

it('should calculate the data', async () => {
    const { result } = renderHook(() => ({
        myParams: useAtomValue(myParamsAtom),
    }))

    await waitFor(() => {
        expect(result.current).toMatchObject({ myParams: { initial: true } })
    })
})

But in 2.0.1, I need the following code to work:

import { renderHook, waitFor } from '@testing-library/react'
import { atom, useAtomValue } from 'jotai'
import { withAtomEffect } from 'jotai-effect'

const searchParamsAtom = withAtomEffect(atom({}), (_get, set) => {
    // ... some irrelevant logic here ...

    set(searchParamsAtom, { initial: true })
})

const myParamsAtom = withAtomEffect(atom<{ initial?: boolean }>({}), (get, set) => {
    // needs to be queued in 2.0.1
    queueMicrotask(() => {
        const searchParams = get(searchParamsAtom)

        // ... some irrelevant logic here ...

        set(myParamsAtom, searchParams)
    })
})

it('should calculate the data', async () => {
    const { result } = renderHook(() => ({
        myParams: useAtomValue(myParamsAtom),

        // the effect is not triggered if not explicitly mounted in 2.0.1
        searchParams: useAtomValue(searchParamsAtom),
    }))

    await waitFor(() => {
        expect(result.current).toMatchObject({ myParams: { initial: true } })
    })
})

Question: Why is the microtask queueing necessary and is the effect no longer mounted when only used in an effect? (both examples work with jotai 2.12.2). Would be happy to get some insights into how this breaks due to the update.

[dmaskasky]

Wow, thanks for the bug report. Please upgrade to v2.0.2 to have the fix.

[dhenneke]

Thanks. Our builds are green now.