npm jotai-effect 2.0.0
v2.0.0

latest releases: 2.2.1, 2.2.0, 2.1.7...
10 months ago

We’re excited to announce the release of jotai-effect v2, which brings a single but significant change to the core API: atomEffect now runs synchronously whenever it mounts or its dependencies change. This update improves consistency, helps avoid race conditions, and keeps related state changes in sync.


What’s New?

Synchronous atomEffect

  • In v1, atomEffect would run asynchronously in the next microtask.
  • In v2, atomEffect runs synchronously on mount and whenever the dependencies it uses have changed.
  • Batching is still supported when you update multiple dependencies in a single writable atom. The effect runs only after that writable atom has finished all its updates, preventing partial updates or intermediate states.

Example:

const syncEffect = atomEffect((get, set) => {
  get(someAtom)
  set(anotherAtom)
})

const store = createStore()
store.set(someAtom, (v) => v + 1)
// The effect above runs immediately, so anotherAtom is updated in the same microtask
console.log(store.get(anotherAtom)) // Updated by atomEffect synchronously

When someAtom is updated, the effect runs immediately, updating anotherAtom in the same turn. If you update multiple atoms in the same writable atom, these changes are batched together, and atomEffect runs after those updates complete.


Migration Guide

For most users, no change is required. If you depended on the old microtask delay or cross-atom batching, read on.

1. Adding back the microtask delay

If your logic explicitly relied on atomEffect running in a separate microtask, you can reintroduce the delay yourself:

Before (v1)

const effect = atomEffect((get, set) => {
  console.log('effect')
  return () => {
    console.log('cleanup')
  }
})

After (v2)

const effect = atomEffect((get, set) => {
  queueMicrotask(() => {
    console.log('effect')
  })
  return () => {
    queueMicrotask(() => {
      console.log('cleanup')
    })
  }
})

2. Batching updates

In v1, updates to separate atoms were implicitly batched in the next microtask. In v2, batching only occurs within a single writable atom update:

Before (v1)

store.set(atomA, (v) => v + 1)
store.set(atomB, (v) => v + 1)
// atomEffect would 'see' both changes together in the next microtask

After (v2)

const actionAtom = atom(null, (get, set) => {
  set(atomA, (v) => v + 1)
  set(atomB, (v) => v + 1)
})

store.set(actionAtom)
// atomEffect now runs after both updates, in one batch

A Special Thanks to Daishi Kato

I’d like to extend my deepest gratitude to Daishi Kato, author of Jotai. Daishi dedicated months of tireless work to rework and rewrite significant parts of the Jotai core—primarily to empower community library authors such as myself to implement features such as synchronous effects in jotai-effect. His willingness to refine Jotai’s internals and his thoughtfulness in API design made this effort possible. Thank you.

Final Thoughts

  • Most code will just work without any changes.
  • If you have specialized scenarios relying on microtask delays or separate updates to multiple atoms, you’ll need to wrap them in a single writable atom or manually queue the microtask.

We hope these improvements make your state management more predictable and easier to reason about. If you have any issues, please feel free to open a GitHub Discussion. Happy coding!

Don't miss a new jotai-effect release

NewReleases is sending notifications on new releases.