Jotai

https://jotai.org/docs
Admin
Jotai is a primitive and flexible state management library for React, offering a minimal core API...
Tokens:112,789
Snippets:868
Trust Score:9
Update:5 hours ago
Show doc for...
Tokens:
Raw
### Install jotai-devtools

Source: https://jotai.org/docs/tools/devtools

Install the jotai-devtools package to get started.

```bash
npm install jotai-devtools
```

--------------------------------

### Async/await promise example (greetingPromise)

Source: https://jotai.org/docs/basics/functional-programming-and-jotai

Shows the async/await equivalent of the atom example, using promises and await to get values. This is the promise counterpart to the atom getter, illustrating the monad similarity.

```javascript
const namePromise = Promise.resolve('Visitor')
const countPromise = Promise.resolve(1)
const greetingPromise = (async function () {
  const name = await namePromise
  const count = await countPromise
  return (
    <div>
      Hello, {name}! You have visited this page {count} times.
    </div>
  )
})()
```

--------------------------------

### Install jotai-babel

Source: https://jotai.org/docs/tools/devtools

Install the jotai-babel package as a dev dependency for the Babel plugin setup.

```bash
npm install -D jotai-babel
```

--------------------------------

### Create Next.js app with Jotai example

Source: https://jotai.org/docs/guides/nextjs

Use this command to scaffold a new Next.js project with the with-jotai example. It runs npx create-next-app with the with-jotai example template.

```bash
npx create-next-app --example with-jotai with-jotai-app
```

--------------------------------

### Install xstate and jotai-xstate

Source: https://jotai.org/docs/extensions/xstate

Install the required packages to use the XState extension.

```bash
npm install xstate jotai-xstate
```

--------------------------------

### Install valtio and jotai-valtio

Source: https://jotai.org/docs/extensions/valtio

Install the required packages to use the Valtio extension.

```bash
npm install valtio jotai-valtio
```

--------------------------------

### Install jotai-urql and dependencies

Source: https://jotai.org/docs/extensions/urql

Install the required packages to use the jotai-urql extension.

```bash
npm install jotai-urql @urql/core wonka
```

--------------------------------

### Usage examples for Jotai skill

Source: https://jotai.org/docs/tools/skill

Example prompts to use after installing the skill. These are questions or commands to ask the coding agent, such as reviewing atom design, refactoring context state, reducing rerenders, and migrating from Jotai v2 to v3.

```text
Review the form atom design.
```

```text
Refactor React Context state into atoms.
```

```text
Reduce unrelated atom rerenders.
```

```text
Use the Jotai skill to help migrate this project from Jotai v2 to v3.
```

--------------------------------

### Install jotai-relay and relay-runtime

Source: https://jotai.org/docs/extensions/relay

Install the required packages for using Jotai with Relay.

```bash
npm install jotai-relay relay-runtime
```

--------------------------------

### Install jotai-tanstack-query and @tanstack/query-core

Source: https://jotai.org/docs/extensions/query

Install the required packages for the extension. You need jotai-tanstack-query and @tanstack/query-core in addition to jotai.

```bash
npm install jotai-tanstack-query @tanstack/query-core
```

--------------------------------

### Install jotai-eager with npm

Source: https://jotai.org/docs/third-party/eager

Install the jotai-eager package using npm.

```bash
npm install jotai-eager
```

--------------------------------

### Install @swc-jotai/react-refresh

Source: https://jotai.org/docs/tools/swc

Install the react-refresh plugin as a dev dependency.

```bash
npm install --save-dev @swc-jotai/react-refresh
```

--------------------------------

### createStore: Create and use a custom store

Source: https://jotai.org/docs/core/store

Creates a new empty store that can be passed to Provider. The store has get, set, and sub methods for atom access and subscription. The example shows setting an atom, subscribing to changes, and passing the store to a Provider.

```javascript
const myStore = createStore()

const countAtom = atom(0)
myStore.set(countAtom, 1)
const unsub = myStore.sub(countAtom, () => {
  console.log('countAtom value is changed to', myStore.get(countAtom))
})
// unsub() to unsubscribe

const Root = () => (
  <Provider store={myStore}>
    <App />
  </Provider>
)
```

--------------------------------

### Install bunshi

Source: https://jotai.org/docs/extensions/scope

Install the bunshi package via npm.

```bash
npm install bunshi
```

--------------------------------

### Install optics-ts and jotai-optics

Source: https://jotai.org/docs/extensions/optics

Install the required packages to use the Jotai Optics extension.

```bash
npm install optics-ts jotai-optics
```

--------------------------------

### Install immer and jotai-immer

Source: https://jotai.org/docs/extensions/immer

Install the required packages to use the Immer extension.

```bash
npm install immer jotai-immer
```

--------------------------------

### atomWithMachine example

Source: https://jotai.org/docs/extensions/xstate

Creates an atom with an XState machine. The getMachine function receives a get argument to read other atom values. The example shows an editable text component with reading and editing states.

```tsx
import { useAtom } from 'jotai'
import { atomWithMachine } from 'jotai-xstate'
import { assign, createMachine } from 'xstate'

const createEditableMachine = (value: string) =>
  createMachine<{ value: string }>({
    id: 'editable',
    initial: 'reading',
    context: {
      value,
    },
    states: {
      reading: {
        on: {
          dblclick: 'editing',
        },
      },
      editing: {
        on: {
          cancel: 'reading',
          commit: {
            target: 'reading',
            actions: assign({
              value: (_, { value }) => value,
            }),
          },
        },
      },
    },
  })

const defaultTextAtom = atom('edit me')
const editableMachineAtom = atomWithMachine((get) =>
  // `get` is available only for initializing a machine
  createEditableMachine(get(defaultTextAtom)),
)

const Toggle = () => {
  const [state, send] = useAtom(editableMachineAtom)

  return (
    <div>
      {state.matches('reading') && (
        <strong onDoubleClick={send}>{state.context.value}</strong>
      )}
      {state.matches('editing') && (
        <input
          autoFocus
          defaultValue={state.context.value}
          onBlur={(e) => send({ type: 'commit', value: e.target.value })}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              send({ type: 'commit', value: e.target.value })
            }
            if (e.key === 'Escape') {
              send('cancel')
            }
          }}
        />
      )}
      <br />
      <br />
      <div>
        Double-click to edit. Blur the input or press <code>enter</code> to
        commit. Press <code>esc</code> to cancel.
      </div>
    </div>
  )
}
```

--------------------------------

### Install @swc-jotai/debug-label

Source: https://jotai.org/docs/tools/swc

Install the debug-label plugin as a dev dependency.

```bash
npm install --save-dev @swc-jotai/debug-label
```

--------------------------------

### Install redux and jotai-redux

Source: https://jotai.org/docs/extensions/redux

Install the required packages to use the Redux extension for Jotai.

```bash
npm install redux jotai-redux
```

--------------------------------

### Install zustand and jotai-zustand

Source: https://jotai.org/docs/extensions/zustand

Install the required packages to use the Zustand extension with Jotai.

```bash
npm install zustand jotai-zustand
```

--------------------------------

### Counter Example with bunshi

Source: https://jotai.org/docs/extensions/scope

Shows how to define a molecule that depends on a scope and use it in components. The App provides different initial values via ScopeProvider, and the Counter uses the molecule to get an atom.

```jsx
import { atom, useAtom } from 'jotai'
import { molecule, useMolecule, createScope, ScopeProvider } from 'bunshi/react'

const InitialCountScope = createScope({ initialCount: 0 })
const countMolecule = molecule((getMol, getScope) => {
  const { initialCount } = getScope(InitialCountScope)
  return atom(initialCount)
})

function Counter() {
  const countAtom = useMolecule(countMolecule)
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      {count} <button onClick={() => setCount((v) => v + 1)}>+1</button>
    </div>
  )
}

function App() {
  return (
    <div>
      <h1>With initial value 1</h1>
      <ScopeProvider scope={InitialCountScope} value={{ initialCount: 1 }}>
        <Counter />
        <Counter />
      </ScopeProvider>
      <h1>With initial value 2</h1>
      <ScopeProvider scope={InitialCountScope} value={{ initialCount: 2 }}>
        <Counter />
        <Counter />
      </ScopeProvider>
      <h1>Default</h1>
      <Counter />
      <Counter />
    </div>
  )
}
```

--------------------------------

### Example: normal atom vs atomWithCache

Source: https://jotai.org/docs/extensions/cache

Complete example demonstrating a normal async atom and a cached atom using atomWithCache, with a UI to change the ID and display user data.

```jsx
import { atom, useAtom } from 'jotai'
import { atomWithCache } from 'jotai-cache'

const idAtom = atom(1)

const normalAtom = atom(async (get) => {
  const id = get(idAtom)
  const response = await fetch(`https://reqres.in/api/users/${id}?delay=1`)
  return response.json()
})

const cachedAtom = atomWithCache(async (get) => {
  const id = get(idAtom)
  const response = await fetch(`https://reqres.in/api/users/${id}?delay=1`)
  return response.json()
})

const NormalUser = () => {
  const [{ data }] = useAtom(normalAtom)
  return (
    <div>
      <h1>User (normal atom)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>First name: {data.first_name}</li>
        <li>Last name: {data.last_name}</li>
      </ul>
    </div>
  )
}

const CachedUser = () => {
  const [{ data }] = useAtom(cachedAtom)
  return (
    <div>
      <h1>User (cached atom)</h1>
      <ul>
        <li>ID: {data.id}</li>
        <li>First name: {data.first_name}</li>
        <li>Last name: {data.last_name}</li>
      </ul>
    </div>
  )
}

const App = () => {
  const [id, setId] = useAtom(idAtom)
  return (
    <div>
      ID: {id}{' '}
      <button type="button" onClick={() => setId((c) => c - 1)}>
        Prev
      </button>{' '}
      <button type="button" onClick={() => setId((c) => c + 1)}>
        Next
      </button>
      <hr />
      <Suspense fallback="Loading...">
        <CachedUser />
      </Suspense>
      <hr />
      <Suspense fallback="Loading...">
        <NormalUser />
      </Suspense>
    </div>
  )
}
```

--------------------------------

### Install jotai-history

Source: https://jotai.org/docs/third-party/history

Install the jotai-history package via npm.

```bash
npm install jotai-history
```

--------------------------------

### Install jotai-effect with npm

Source: https://jotai.org/docs/extensions/effect

Install the jotai-effect package using npm.

```bash
npm install jotai-effect
```

--------------------------------

### Install jotai-scope

Source: https://jotai.org/docs/extensions/scope

Install the jotai-scope package via npm.

```bash
npm install jotai-scope
```

--------------------------------

### Vite + React Babel plugin setup

Source: https://jotai.org/docs/tools/devtools

Example Vite configuration for a React project using the jotai-babel preset.

```typescript
// vite.config.ts

export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: ['jotai-babel/preset'],
      },
    }),
  ],
})
```

--------------------------------

### Install Bunja

Source: https://jotai.org/docs/third-party/bunja

Install the bunja package via npm.

```bash
npm install bunja
```

--------------------------------

### Install jotai-location

Source: https://jotai.org/docs/extensions/location

Install the jotai-location package to use the location atoms.

```bash
npm install jotai-location
```

--------------------------------

### Install jotai-cache

Source: https://jotai.org/docs/extensions/cache

Install the jotai-cache package via npm.

```bash
npm install jotai-cache
```

--------------------------------

### useAtomsDevtools output example

Source: https://jotai.org/docs/guides/debugging

Example of the data structure provided by useAtomsDevtools, showing atom values and their dependents.

```json
{
  "values": {
    "atom1:count": 0,
    "atom2:doubleCount": 0,
    "atom3:half": 0,
    "atom4:sum": 0
  },
  "dependents": {
    "atom1:count": ["atom1:count", "atom2:doubleCount", "atom4:sum"],
    "atom2:doubleCount": ["atom3:half", "atom4:sum"],
    "atom3:half": ["atom4:sum"],
    "atom4:sum": []
  }
}
```

--------------------------------

### Install jotai-rolldown with npm

Source: https://jotai.org/docs/tools/rolldown

Install the plugin as a dev dependency using npm.

```bash
npm install --save-dev jotai-rolldown
```

--------------------------------

### Install Jotai skill with npx

Source: https://jotai.org/docs/tools/skill

Installs the Jotai skill using npx. The first command installs it for the default agent, the second and third install it for specific agents (codex and claude-code), and the fourth installs it globally.

```bash
npx skills add jotaijs/jotai-skills --skill jotai
```

```bash
npx skills add jotaijs/jotai-skills --skill jotai --agent codex
npx skills add jotaijs/jotai-skills --skill jotai --agent claude-code
```

```bash
npx skills add jotaijs/jotai-skills --skill jotai --global
```

--------------------------------

### Install jotai-trpc and tRPC packages

Source: https://jotai.org/docs/extensions/trpc

Install the required packages to use the Jotai tRPC extension: jotai-trpc, @trpc/client, and @trpc/server.

```bash
npm install jotai-trpc @trpc/client @trpc/server
```

--------------------------------

### Install jotai-family package

Source: https://jotai.org/docs/utilities/family

Install the jotai-family package via npm.

```bash
npm install jotai-family
```

--------------------------------

### Install the Jotai skill

Source: https://jotai.org/docs/guides/migrating-to-v3

Command to install the Jotai skill in your project using npx. Run this in your project directory before asking your coding agent to use the skill.

```bash
npx skills add jotaijs/jotai-skills --skill jotai
```

--------------------------------

### Install @tanstack/react-query-devtools

Source: https://jotai.org/docs/extensions/query

Install the React Query Devtools package to enable the devtools for the Jotai TanStack Query extension.

```bash
npm install @tanstack/react-query-devtools
```

--------------------------------

### atomWithQuery usage example

Source: https://jotai.org/docs/extensions/relay

Complete example showing how to use atomWithQuery with a Relay environment, including fetching data and rendering it with Suspense.

```jsx
import React, { Suspense } from 'react'
import { Provider, useAtom } from 'jotai'
import { useHydrateAtoms } from 'jotai/utils'
import { environmentAtom, atomWithQuery } from 'jotai-relay'
import { Environment, Network, RecordSource, Store } from 'relay-runtime'
import graphql from 'babel-plugin-relay/macro'

const myEnvironment = new Environment({
  network: Network.create(async (params, variables) => {
    const response = await fetch('https://countries.trevorblades.com/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: params.text,
        variables,
      }),
    })
    return response.json()
  }),
  store: new Store(new RecordSource()),
})

const countriesAtom = atomWithQuery(
  graphql`
    query AppCountriesQuery {
      countries {
        name
      }
    }
  `,
  () => ({}),
)

const Main = () => {
  const [data] = useAtom(countriesAtom)
  return (
    <ul>
      {data.countries.map(({ name }) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  )
}

const HydrateAtoms = ({ children }) => {
  useHydrateAtoms([[environmentAtom, myEnvironment]])
  return children
}

const App = () => {
  return (
    <Provider>
      <HydrateAtoms>
        <Suspense fallback="Loading...">
          <Main />
        </Suspense>
      </HydrateAtoms>
    </Provider>
  )
}
```

--------------------------------

### Install additional packages for Vite 8

Source: https://jotai.org/docs/tools/devtools

Install the required packages for using the Babel plugin with Vite 8.

```bash
npm install -D @rolldown/plugin-babel @babel/core
```

--------------------------------

### Usage example for atomWithToggleAndStorage

Source: https://jotai.org/docs/recipes/atom-with-toggle-and-storage

Shows how to create an atom with atomWithToggleAndStorage. The example creates an atom with initial value false and persists it in localStorage under the key 'isActive'.

```typescript
import { atomWithToggleAndStorage } from 'XXX'

// will have an initial value set to false & get stored in localStorage under the key "isActive"
const isActiveAtom = atomWithToggleAndStorage('isActive')
```

--------------------------------

### splitAtom Todo List Example

Source: https://jotai.org/docs/utilities/split

Complete React example demonstrating splitAtom to manage a list of todo items. It shows how to create an atom for each item, update individual items, and remove them via dispatch actions.

```tsx
import { Provider, atom, useAtom, PrimitiveAtom } from 'jotai'
import { splitAtom } from 'jotai/utils'
import './styles.css'

const initialState = [
  {
    task: 'help the town',
    done: false,
  },
  {
    task: 'feed the dragon',
    done: false,
  },
]

const todosAtom = atom(initialState)
const todoAtomsAtom = splitAtom(todosAtom)

type TodoType = (typeof initialState)[number]

const TodoItem = ({
  todoAtom,
  remove,
}: {
  todoAtom: PrimitiveAtom<TodoType>
  remove: () => void
}) => {
  const [todo, setTodo] = useAtom(todoAtom)
  return (
    <div>
      <input
        value={todo.task}
        onChange={(e) => {
          setTodo((oldValue) => ({ ...oldValue, task: e.target.value }))
        }}
      />
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => {
          setTodo((oldValue) => ({ ...oldValue, done: !oldValue.done }))
        }}
      />
      <button onClick={remove}>remove</button>
    </div>
  )
}

const TodoList = () => {
  const [todoAtoms, dispatch] = useAtom(todoAtomsAtom)
  return (
    <ul>
      {todoAtoms.map((todoAtom) => (
        <TodoItem
          todoAtom={todoAtom}
          remove={() => dispatch({ type: 'remove', atom: todoAtom })}
        />
      ))}
    </ul>
  )
}

const App = () => (
  <Provider>
    <TodoList />
  </Provider>
)

export default App
```

--------------------------------

### Cleanup Dependency Example

Source: https://jotai.org/docs/extensions/effect

Shows that get calls in cleanup do not add dependencies. The get in the cleanup function does not add anAtom as a dependency.

```javascript
atomEffect((get, set) => {
  return () => {
    // does not add `anAtom` as a dependency
    get(anAtom)
  }
})
```

--------------------------------

### Async Dependency Example

Source: https://jotai.org/docs/extensions/effect

Shows that asynchronous get calls do not add dependencies. The get inside setTimeout does not add anAtom as a dependency.

```javascript
atomEffect((get, set) => {
  setTimeout(() => {
    // does not add `anAtom` as a dependency
    get(anAtom)
  })
})
```

--------------------------------

### Async atoms: previous API

Source: https://jotai.org/docs/guides/migrating-to-v2-api

In v1, the get function for read functions of async atoms resolves promises automatically. This example shows the old pattern where get(asyncAtom) returns the resolved value.

```javascript
const asyncAtom = atom(async () => 'hello')
const derivedAtom = atom((get) => get(asyncAtom).toUppercase())
```

--------------------------------

### Create and use a store with createStore

Source: https://jotai.org/docs/guides/migrating-to-v2-api

Shows how to create a store, set and get atom values, and subscribe to changes. The store can be created from 'jotai' or 'jotai/vanilla'. Call unsub() to unsubscribe.

```javascript
import { createStore } from 'jotai' // or from 'jotai/vanilla'

const store = createStore()
store.set(fooAtom, 'foo')

console.log(store.get(fooAtom)) // prints "foo"

const unsub = store.sub(fooAtom, () => {
  console.log('fooAtom value in store is changed')
})
// call unsub() to unsubscribe.
```

--------------------------------

### Sync Dependency Example

Source: https://jotai.org/docs/extensions/effect

Shows that atoms accessed with get inside the effect are added to dependencies. The effect updates whenever anAtom changes value.

```javascript
atomEffect((get, set) => {
  // updates whenever `anAtom` changes value
  get(anAtom)
})
```

--------------------------------

### Set shouldRemove to remove old atoms

Source: https://jotai.org/docs/utilities/family

Example showing how to register a shouldRemove function to remove atoms older than 1 hour. The function runs immediately and when about to get an atom from the cache.

```javascript
// Remove atoms older than 1 hour
todoFamily.setShouldRemove((createdAt, param) => {
  return Date.now() - createdAt > 60 * 60 * 1000
})
```

--------------------------------

### Mutation example with atomWithMutation

Source: https://jotai.org/docs/extensions/urql

Shows how to create a mutation atom and execute it from a button click, logging the result.

```tsx
import { useAtom } from 'jotai'

const incrementMutationAtom = atomWithMutation<{ increment: number }>({
  query: 'mutation Increment { increment }',
})

const Counter = () => {
  const [operationResult, executeMutation] = useAtom(incrementMutationAtom)
  return (
    <div>
      <button
        onClick={() =>
          executeMutation().then((it) => console.log(it.data?.increment))
        }
      >
        Increment
      </button>
      <div>{operationResult.data?.increment}</div>
    </div>
  )
}
```

--------------------------------

### createJSONStorage usage example

Source: https://jotai.org/docs/utilities/storage

Shows how to create a custom storage implementation using createJSONStorage with a getter for the underlying storage (e.g., window.localStorage) and optional reviver/replacer options for JSON serialization.

```javascript
const storage = createJSONStorage(
  // getStringStorage
  () => window.localStorage, // or window.sessionStorage, asyncStorage or alike
  // options (optional)
  {
    reviver, // optional reviver option for JSON.parse
    replacer, // optional replacer option for JSON.stringify
  },
)
```

--------------------------------

### createIsolation Example

Source: https://jotai.org/docs/extensions/scope

Shows how to use createIsolation to create isolated Jotai hooks and Provider to avoid context conflicts in libraries.

```jsx
import { createIsolation } from 'jotai-scope'

const { Provider, useStore, useAtom, useAtomValue, useSetAtom } =
  createIsolation()

function Library() {
  return (
    <Provider>
      <LibraryComponent />
    </Provider>
  )
}
```

--------------------------------

### Query example with atomWithQuery

Source: https://jotai.org/docs/extensions/urql

Shows how to create a query atom and use it in a component. The component suspends until the first result is resolved, and errors should be handled by a parent ErrorBoundary.

```tsx
import { useAtom } from 'jotai'

const countQueryAtom = atomWithQuery<{ count: number }>({
  query: 'query Count { count }',
  getClient: () => client, // This option is optional if `useRehydrateAtom([[clientAtom, client]])` is used globally
})

const Counter = () => {
  // Will suspend until first operation result is resolved. Either with error, partial data, data
  const [operationResult, reexecute] = useAtom(countQueryAtom)

  if (operationResult.error) {
    // This shall be handled in the parent ErrorBoundary above
    throw operationResult.error
  }

  // You have to use optional chaining here, as data may be undefined at this point (only in case of error)
  return <>{operationResult.data?.count}</>
}
```

--------------------------------

### TypeScript example with explicit types

Source: https://jotai.org/docs/utilities/family

Example of atomFamily with explicit TypeScript generics for parameter and atom type.

```typescript
import { atom } from 'jotai'
import type { PrimitiveAtom } from 'jotai'
import { atomFamily } from 'jotai-family'

const myFamily = atomFamily<number, PrimitiveAtom<number>>((id: number) =>
  atom(id),
)
```

--------------------------------

### React Context Usage: From Local State to Multiple Contexts

Source: https://jotai.org/docs/basics/comparison

Shows three steps: using useState locally, lifting state to a context, and managing multiple states with multiple contexts. Highlights the complexity of provider nesting.

```jsx
// 1. useState local state
const Component = () => {
  const [state, setState] = useState(0)
}

// 2. Lift local state up and share it via context
const StateContext = createContext()
const Parent = ({ children }) => {
  return (
    <StateContext.Provider value={useState(0)}>
      {children}
    </StateContext.Provider>
  )
}
const Component = () => {
  const [state, setState] = useContext(StateContext)
}

// 3. Have multiple states and contexts
const State1Context = createContext()
const State2Context = createContext()
const Parent = ({ children }) => (
  <State1Context.Provider value={useState(0)}>
    <State2Context.Provider value={useState(0)}>
      {children}
    </State2Context.Provider>
  </State1Context.Provider>
)
const Component1 = () => {
  const [state, setState] = useContext(State1Context)
}
const Component2 = () => {
  const [state, setState] = useContext(State2Context)
}
```

--------------------------------

### Incremental adoption: useQuery vs atomWithQuery

Source: https://jotai.org/docs/extensions/query

Shows how to incrementally adopt jotai-tanstack-query. The existing useQuery hook and the atomWithQuery equivalent are shown together, demonstrating the same query key and data access pattern.

```javascript
// existing useQueryHook
const { data, isPending, isError } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})

// jotai-tanstack-query
const todosAtom = atomWithQuery(() => ({
  queryKey: ['todos'],
}))

const [{ data, isPending, isError }] = useAtom(todosAtom)
```

--------------------------------

### atomFamily: New API (v3) import

Source: https://jotai.org/docs/guides/migrating-to-v3

In v3, atomFamily is imported from the 'jotai-family' package. Install it with 'npm install jotai-family'.

```javascript
// npm install jotai-family
import { atomFamily } from 'jotai-family'
```

--------------------------------

### Referencing the same instance of the client for both atoms and urql provider

Source: https://jotai.org/docs/extensions/urql

Guidance on ensuring the same urqlClient instance is used for both atoms and the urql provider by wrapping the root in a Provider and initializing clientAtom with the same urqlClient value.

```APIDOC
## Referencing the same instance of the client for both atoms and urql provider

### Description
To ensure that you reference the same urqlClient object, wrap the root of your project in a `<Provider>` and initialise clientAtom with the same urqlClient value you provided to UrqlProvider. This allows you to ignore the optional `getClient` parameter when using `atomWithQuery`.

### Example
```tsx
import { Suspense } from 'react'
import { Provider } from 'jotai/react'
import { useHydrateAtoms } from 'jotai/react/utils'
import { clientAtom } from 'jotai-urql'

import {
  createClient,
  cacheExchange,
  fetchExchange,
  Provider as UrqlProvider,
} from 'urql'

const urqlClient = createClient({
  url: 'https://countries.trevorblades.com/',
  exchanges: [cacheExchange, fetchExchange],
  fetchOptions: () => {
    return { headers: {} }
  },
})

const HydrateAtoms = ({ children }) => {
  useHydrateAtoms([[clientAtom, urqlClient]])
  return children
}

export default function MyApp({ Component, pageProps }) {
  return (
    <UrqlProvider value={urqlClient}>
      <Provider>
        <HydrateAtoms>
          <Suspense fallback="Loading...">
            <Component {...pageProps} />
          </Suspense>
        </HydrateAtoms>
      </Provider>
    </UrqlProvider>
  )
}
```
```

--------------------------------

### useAtomsDevtools example with AtomsDevtools component

Source: https://jotai.org/docs/tools/devtools

Example showing how to use useAtomsDevtools in a wrapper component (AtomsDevtools) that must be placed higher in the React tree than the components consuming atoms. The example defines countAtom and doubleCountAtom, a Counter component, and an App that wraps Counter with AtomsDevtools.

```jsx
const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const  [count, setCount] =  useAtom(countAtom);
  const  [doubleCount] =  useAtom(doubleCountAtom);

  ...
}

const AtomsDevtools = ({ children }) => {
  useAtomsDevtools('demo')
  return children
}

export default function App()  {
  return (
    <AtomsDevtools>
      <Counter />
    </AtomsDevtools>
  )
 }
```

--------------------------------

### Configure @swc-jotai/react-refresh in Next.js

Source: https://jotai.org/docs/tools/swc

Enable the plugin via the experimental swcPlugins option in next.config.js.

```javascript
module.exports = {
  experimental: {
    swcPlugins: [['@swc-jotai/react-refresh', {}]],
  },
}
```

--------------------------------

### Example with sessionStorage using atomWithStorage

Source: https://jotai.org/docs/guides/persistence

Uses the atomWithStorage utility with createJSONStorage to persist to sessionStorage. The storage is created with a function that returns window.sessionStorage only when window is defined.

```javascript
import { atomWithStorage, createJSONStorage } from 'jotai/utils'

const storage = createJSONStorage(() =>
  typeof window !== 'undefined' ? window.sessionStorage : undefined,
)
const someAtom = atomWithStorage('some-key', someInitialValue, storage)
```

--------------------------------

### freezeAtom usage example

Source: https://jotai.org/docs/guides/debugging

Example of using freezeAtom with an atom containing an object. The atom value is deeply frozen to prevent accidental mutations.

```typescript
import { atom } from 'jotai'
import { freezeAtom } from 'jotai/utils'

const objAtom = freezeAtom(atom({ count: 0 }))
```
Tokens:
Raw