Summary

jotai/query

• [BREAKING] Dropped equalityFn in atomWithQuery and atomWithInfiniteQuery
• Added an optional parameter getQueryClient for custom query client.
• Fixed the behavior with initialData

jotai/rxjs

• New bundle to integrate with rxjs.
• This is an experimental feature, and we are looking for a contributor.

Misc

• Fixed various utils and integrations for better atom scope handling. This is primarily for third-party libraries.

PRs

• #586 fix(query): subscribe instead of fetch if initialData
• #592 breaking(query): remove optional equalityFn from atomWith(Infinite)Query
• #589 fix: support atom scope outside core
• #341 feat: jotai/rxjs

Summary

• Added "import" export entries for modern bundlers.
• Fixed atomWithInfiniteQuery in jotai/query.
• Fixed selectAtom and splitAtom in jotai/utils.

PRs

• #577 fix(utils): refactor to avoid variable outside atom
• #582 fix(query): gracefully handle CancelledError
• #583 fix: package.json exports to have import

Summary

jotai/query

• Added a new function atomWithInfiniteQuery

PRs

• #571 feat(query): add atomWithInfiniteQuery
• #573 fix(query): use observer for refetch
• #574 chore(core): write getter default parameter instead of optional parameter

Summary

jotai (dev only)

• Fixed Provider's initialValues handling in DEV
  • This is more for jotai/devtools

jotai/utils

• Fixed atomWithStorage for React Native AsyncStorage

jotai/query

• Fixed atomWithQuery error handling

PRs

• #566 fix(snapshot): Add initialValues to debugstore init
• #567 fix(query): handle error in atomWithQuery
• #569 fix(utils/atomWithStorage): async storage support

News

This version adds a new bundle jotai/urql, an integration for urql, a GraphQL client.

Summary

jotai/utils

• Dropped REFRESH symbol in atomWithDefault in favor of common RESET symbol

jotai/query

• Support initialData option for non Suspense usage

jotai/xstate

• Changed options so that it can be constructed with other atoms

jotai/urql

• Initial release
  • This is brand new. It may contain bugs, and api can be changed in the future.

PRs

• #548 feat(query): atomWithQuery to use options.initialData to avoid suspense
• #552 breaking(utils): drop REFRESH symbol in atomWithDefault and use common RESET symbol
• #463 feat: jotai/urql
• #557 fix(xstate): support getOptions

Summary

jotai

• Added experimental unstable_promise option in get in atom write

jotai/utils

• Fixed dual render issue with atomWithStorage and improved it with subscribe option
• Improved atomWithDefault with "REFRESH" capability
• Fixed a bug in splitAtom in edge use cases

PRs

• #532 refactor(devtools): remove unused code
• #526 fix(query): refactor atomWithQuery to avoid possible memory leaks
• #543 fix(core): disable useDebugState in test env
• #541 fix(utils/splitAtom): add a DEV warning on wrong atom configs
• #539 fix(core): add experimental promise option for write getter
• #537 fix(utils/atomWithDefault): support refresh
• #540 fix(utils): improve atomWithStorage covering atomWithHash
• #547 fix(query): queryClientAtom for initialValues

Announcing Jotai v1

We are pleased to announce jotai v1 release!
Jotai is a primitive and flexible state management library for React.

Demos:

• Text Length example
• Hacker News example
• Todos example

Global state like useState

Jotai's atoms can be used like useState, but it's global state.

const yearAtom = atom(2021)

const Component = () => {
  const [year, setYear] = useAtom(yearAtom)
  return <>{year} <button onClick={() => setYear((c) => c + 1)}>Next</button></>
}

Derived state

You can create a derived atom with read function.

const meterAtom = atom(1000)
const kilometerAtom = atom((get) => get(meterAtom) / 1000)

Minimal API and additional utilities

Jotai core jotai exposes only two functions atom, useAtom and one optional component Provider.

We have more functions in separate bundles jotai/*, such as jotai/utils and jotai/devtools.
For example, those include atomWithStorage, atomWithReset, atomFamily, to name a few.
They are all implemented with the public api of jotai core.
So, you can also create a similar third-party library.

Async support

Jotai comes with Suspense support. If your read function is async, it will suspend behind the scenes, and you wouldn't need to care async state in your code.

const idAtom = atom('id001')
const dataAtom = atom(async (get) => {
  const response = await fetch(`.../${id}`)
  return response.json()
}

const Component = () => {
  const [data] = useAtom(dataAtom)
  return <>{data.title} - {data.author}</>
}

Notes about Suspense

We use the undocumented behavior of "Suspense for Lazy Loading" for any async.
"Suspense for Data Fetching" is still to be finalized.
Hence, this feature is technically unstable. We try our best to keep the API when it migrates.

Integrations

Jotai comes with various integrations. Some of them are complete, some are preliminary.

• jotai/immer: immer integration
• jotai/optics: optics-ts integration
• jotai/query: react-query integration
• jotai/xstate: xstate integration
• jotai/valtio: valtio integration
• jotai/zustand: zustand integration
• jotai/redux: redux integration

Moving forward

The core API should be stable for React 16.8 and above.
All major issues are resolved, and if there is a bug by chance, we will fix it as soon as possible.

We will be adding more utility functions on top of core, and your use cases would be important. Free free to open a new discussion.

We are already working on new integrations for urql and rxjs. We have a plan to work on dedicated integration for nextjs.

When React releases a new version with Suspense and Concurrent support, we will start working on the next major version. Our hope is to keep the API compatible.

Notes about Versioning

We follow semantic versioning for core jotai.
Note that type-only changes and sub bundles jotai/* don't strictly follow the semver.
Please check release notes for details.