54:T699,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 (

{state.matches('reading') && ( {state.context.value} )} {state.matches('editing') && ( 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') } }} /> )}

Double-click to edit. Blur the input or press enter to commit. Press esc to cancel.

) }55:T547,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 remove: () => void }) => { const [todo, setTodo] = useAtom(todoAtom) return (

{ setTodo((oldValue) => ({ ...oldValue, task: e.target.value })) }} /> { setTodo((oldValue) => ({ ...oldValue, done: !oldValue.done })) }} />

) } const TodoList = () => { const [todoAtoms, dispatch] = useAtom(todoAtomsAtom) return (

dispatch({ type: 'remove', atom: todoAtom })} /> ))}

) } const App = () => ( ) export default App56:T498,## useAtomsDevtools ### Description A catch-all version of `useAtomDevtools` that shows all atoms in the store instead of a specific one. It is experimental and only works in a non-production environment. ### Signature ```ts function useAtomsDevtools( name: string, options?: { store?: Store enabled?: boolean }, ): void ``` ### Parameters - **name** (string) - Required - Name for the Redux devtools instance. - **options.store** (Store) - Optional - The store to use. - **options.enabled** (boolean) - Optional - Whether the devtools are enabled. ### Usage Notes - Must be placed in a component where the consumed atoms are in a lower place of the React tree. - Only works in `process.env.NODE_ENV !== 'production'`. ### Example ```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 ( ) } ```57:T4d8,## observe ### Description Mounts an effect to watch state changes on a Jotai store. Useful for running global side effects or logic at the store level. ### Signature ```ts type Cleanup = () => void type Effect = ( get: Getter & { peek: Getter } set: Setter & { recurse: Setter } ) => Cleanup | void type Unobserve = () => void function observe(effect: Effect, store?: Store): Unobserve ``` ### Parameters - **effect** (Effect) - Required - A function for observing and reacting to atom state changes. - **store** (Store) - Optional - A Jotai store to mount the effect on. Defaults to the global store if not provided. ### Returns - **Unobserve** - A stable function that removes the effect from the store and cleans up any internal references. ### Usage ```js import { observe } from 'jotai-effect' const unobserve = observe((get, set) => { set(logAtom, `someAtom changed: ${get(someAtom)}`) }) unobserve() ``` ### Usage With React Pass the store to both `observe` and the `Provider` to ensure the effect is mounted to the correct store. ```tsx const store = createStore() const unobserve = observe((get, set) => { set(logAtom, `someAtom changed: ${get(someAtom)}`) }, store) ... ```58:T4ac,## useAtomsSnapshot ### Description Takes a snapshot of the currently mounted atoms and their state. It returns an `AtomsSnapshot` which is a `Map`. This hook is primarily meant for debugging and devtools use cases. ### Signature ```ts function useAtomsSnapshot(options?: { store?: Store }): AtomsSnapshot ``` ### Parameters - **options.store** (Store) - Optional - The store to use. ### Returns - **AtomsSnapshot** - A `Map` that can be iterated over to access atoms and their state. ### Usage Notes - Only works in `process.env.NODE_ENV !== 'production'`; returns a static empty value in production. - Causes the component to re-render for all state changes. ### Example ```jsx import { Provider } from 'jotai' import { useAtomsSnapshot } from 'jotai-devtools/utils' const RegisteredAtoms = () => { const atoms = useAtomsSnapshot() return (

Atom count: {atoms.size}

{Array.from(atoms).map(([atom, atomValue]) => (

{`${atom.debugLabel}: ${atomValue}`}

))}

) } const App = () => ( ) ```59:T564,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 (

{name}

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

) }53:{"contextType":"code","snippets":[{"codeTitle":"Set up the todos example locally","codeDescription":"Clone the Jotai repository, install dependencies, and start the development server for the todos example.","codeLanguage":"bash","codeTokens":97,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/todos/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/todos && pnpm install\n\n# start the dev server\npnpm dev","language":"bash"}],"relevance":0.032786883,"generationDate":"2026-09-28T18:12:03.525Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Set up the starter example locally","codeDescription":"Clone the Jotai repository, install dependencies, and start the dev server for the starter example.","codeLanguage":"bash","codeTokens":97,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/starter/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/starter && pnpm install\n\n# start the dev server\npnpm dev","language":"bash"}],"relevance":0.032539684,"generationDate":"2026-09-28T18:11:54.677Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Set up the text_length example locally","codeDescription":"Clone the Jotai repository, install dependencies, and start the dev server for the text_length example.","codeLanguage":"bash","codeTokens":99,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/text_length/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/text_length && pnpm install\n\n# start the dev server\npnpm dev","language":"bash"}],"relevance":0.03175403,"generationDate":"2026-09-28T18:11:55.775Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Set up the mega-form example locally","codeDescription":"Clone the Jotai repository, install dependencies, and start the dev server for the mega-form example.","codeLanguage":"bash","codeTokens":100,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/mega-form/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/mega-form && pnpm install\n\n# start the dev server\npnpm dev","language":"bash"}],"relevance":0.03175403,"generationDate":"2026-09-28T18:11:50.114Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Set up locally","codeDescription":"Clone the Jotai repository, install dependencies, and start the dev server for the Hacker News example.","codeLanguage":"bash","codeTokens":96,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/hacker_news/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/hacker_news && pnpm install\n\n# start the dev server\npnpm dev"}],"relevance":0.031257633,"generationDate":"2026-09-28T18:11:46.293Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Set up locally with git clone and pnpm","codeDescription":"Clone the jotai repository, install dependencies, and start the dev server for the todos_with_atomFamily example.","codeLanguage":"bash","codeTokens":105,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/todos_with_atomFamily/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/todos_with_atomFamily && pnpm install\n\n# start the dev server\npnpm dev","language":"bash"}],"relevance":0.03053613,"generationDate":"2026-09-28T18:12:08.110Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Set up locally with git clone and pnpm","codeDescription":"Clone the Jotai repository, install dependencies, and start the dev server for the 'hello' example. Requires pnpm and Node.js.","codeLanguage":"bash","codeTokens":109,"codeId":"https://github.com/pmndrs/jotai/blob/main/examples/hello/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"git clone https://github.com/pmndrs/jotai\n\n# install project dependencies & build the library\ncd jotai && pnpm install\n\n# move to the examples folder & install dependencies\ncd examples/hello && pnpm install\n\n# start the dev server\npnpm dev"}],"relevance":0.030076887,"generationDate":"2026-09-28T18:11:47.636Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-devtools","codeDescription":"Install the jotai-devtools package to get started with Jotai DevTools.","codeLanguage":"sh","codeTokens":41,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install jotai-devtools","language":"sh"}],"relevance":0.030000001,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Ask Jotai-related questions","codeDescription":"Example prompts to use after installing the skill. These are natural language queries for the coding agent.","codeLanguage":"text","codeTokens":93,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/skill.mdx#_snippet_2","pageTitle":"Jotai Skill Installation and Usage","codeList":[{"language":"text","code":"Review the form atom design."},{"language":"text","code":"Refactor React Context state into atoms."},{"language":"text","code":"Reduce unrelated atom rerenders."},{"language":"text","code":"Use the Jotai skill to help migrate this project from Jotai v2 to v3."}],"relevance":0.028219396,"generationDate":"2026-10-29T09:52:52.299Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install xstate and jotai-xstate","codeDescription":"Install the required packages to use the XState extension.","codeLanguage":"bash","codeTokens":40,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/xstate.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install xstate jotai-xstate","language":"bash"}],"relevance":0.02585639,"generationDate":"2026-09-28T18:09:04.755Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-scope","codeDescription":"Install the `jotai-scope` package to use `ScopeProvider` and `createIsolation`.","codeLanguage":"bash","codeTokens":46,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/scope.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install jotai-scope"}],"relevance":0.025849212,"generationDate":"2026-09-28T18:08:46.158Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-eager","codeDescription":"Install the jotai-eager package to use the eagerAtom primitive.","codeLanguage":"sh","codeTokens":38,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/third-party/eager.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install jotai-eager","language":"sh"}],"relevance":0.025603391,"generationDate":"2026-09-28T18:12:49.091Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install valtio and jotai-valtio","codeDescription":"Install the required packages to use the Valtio extension.","codeLanguage":"bash","codeTokens":45,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/valtio.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install valtio jotai-valtio","language":"bash"}],"relevance":0.025396826,"generationDate":"2026-09-28T18:09:34.835Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Cleanup dependency example","codeDescription":"Shows that get calls in the cleanup function do not add dependencies.","codeLanguage":"js","codeTokens":63,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_11","pageTitle":"Unknown","codeList":[{"code":"atomEffect((get, set) => {\n return () => {\n // does not add `anAtom` as a dependency\n get(anAtom)\n }\n})","language":"js"}],"relevance":0.02536232,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-relay and relay-runtime","codeDescription":"Install the required packages for using Jotai with Relay.","codeLanguage":"bash","codeTokens":41,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/relay.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install jotai-relay relay-runtime","language":"bash"}],"relevance":0.0248779,"generationDate":"2026-09-28T18:08:46.355Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install bunja","codeDescription":"Install the bunja package from npm.","codeLanguage":"bash","codeTokens":28,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/third-party/bunja.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install bunja","language":"bash"}],"relevance":0.024725275,"generationDate":"2026-09-28T18:12:05.415Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Create Next.js app with Jotai example","codeDescription":"Run this command to create a new Next.js app using the with-jotai example from the Next.js repository.","codeLanguage":"bash","codeTokens":61,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/guides/nextjs.mdx#_snippet_5","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npx create-next-app --example with-jotai with-jotai-app"}],"relevance":0.023880195,"generationDate":"2026-09-28T18:10:01.827Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install @swc-jotai/react-refresh","codeDescription":"Install the @swc-jotai/react-refresh plugin as a dev dependency.","codeLanguage":"sh","codeTokens":51,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/swc.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install --save-dev @swc-jotai/react-refresh","language":"sh"}],"relevance":0.023863636,"generationDate":"2026-09-28T18:11:52.006Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install zustand and jotai-zustand","codeDescription":"Install the required packages to use the Zustand extension.","codeLanguage":"bash","codeTokens":44,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/zustand.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install zustand jotai-zustand","language":"bash"}],"relevance":0.023735955,"generationDate":"2026-09-28T18:08:54.596Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-history","codeDescription":"Install the jotai-history package using npm.","codeLanguage":"bash","codeTokens":31,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/third-party/history.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install jotai-history"}],"relevance":0.023689374,"generationDate":"2026-09-28T18:11:26.039Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install @swc-jotai/debug-label","codeDescription":"Install the @swc-jotai/debug-label plugin as a dev dependency.","codeLanguage":"sh","codeTokens":51,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/swc.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"code":"npm install --save-dev @swc-jotai/debug-label","language":"sh"}],"relevance":0.02364724,"generationDate":"2026-09-28T18:11:52.006Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Async dependency example","codeDescription":"Shows that asynchronous get calls (e.g., inside setTimeout) do not add dependencies.","codeLanguage":"js","codeTokens":67,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_10","pageTitle":"Unknown","codeList":[{"code":"atomEffect((get, set) => {\n setTimeout(() => {\n // does not add `anAtom` as a dependency\n get(anAtom)\n })\n})","language":"js"}],"relevance":0.023544975,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install immer and jotai-immer","codeDescription":"Install the required packages to use the Immer extension.","codeLanguage":"bash","codeTokens":38,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/immer.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install immer jotai-immer"}],"relevance":0.023527794,"generationDate":"2026-09-28T18:08:01.959Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install redux and jotai-redux","codeDescription":"Install the required packages `redux` and `jotai-redux` to use the Redux extension.","codeLanguage":"bash","codeTokens":45,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/redux.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install redux jotai-redux"}],"relevance":0.023467172,"generationDate":"2026-09-28T18:08:26.433Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-effect","codeDescription":"Install the jotai-effect package using npm.","codeLanguage":"bash","codeTokens":31,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install jotai-effect"}],"relevance":0.023284148,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-tanstack-query and @tanstack/query-core","codeDescription":"Install the required packages to use the extension. Requires TanStack Query v5.","codeLanguage":"bash","codeTokens":55,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/query.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install jotai-tanstack-query @tanstack/query-core"}],"relevance":0.022888003,"generationDate":"2026-09-28T18:10:14.532Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithReset example","codeDescription":"Example of creating atoms with atomWithReset, initializing with a number and an array of objects.","codeLanguage":"js","codeTokens":81,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/resettable.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"js","code":"import { atomWithReset } from 'jotai/utils'\n\nconst dollarsAtom = atomWithReset(0)\nconst todoListAtom = atomWithReset([\n { description: 'Add a todo', checked: false },\n])"}],"relevance":0.02246486,"generationDate":"2026-09-28T18:13:01.483Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install bunshi","codeDescription":"Install the `bunshi` package to use molecules and scopes for defining atoms that depend on props and state.","codeLanguage":"bash","codeTokens":43,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/scope.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install bunshi"}],"relevance":0.022435898,"generationDate":"2026-09-28T18:08:46.158Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-rolldown with npm","codeDescription":"Install the plugin as a dev dependency.","codeLanguage":"sh","codeTokens":41,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/rolldown.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"sh","code":"npm install --save-dev jotai-rolldown"}],"relevance":0.0221496,"generationDate":"2026-09-28T18:11:13.609Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Run development server with pnpm","codeDescription":"Starts the development server. Then open http://localhost:9000 in your browser to see the result.","codeLanguage":"bash","codeTokens":45,"codeId":"https://github.com/pmndrs/jotai/blob/main/website/README.md#_snippet_2","pageTitle":"Unknown","codeList":[{"code":"pnpm run dev","language":"bash"}],"relevance":0.02206823,"generationDate":"2026-09-28T18:11:59.802Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Sync dependency example","codeDescription":"Shows that synchronous get calls inside the effect add the accessed atoms to the atom's dependencies, causing the effect to run when they change.","codeLanguage":"js","codeTokens":68,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_9","pageTitle":"Unknown","codeList":[{"code":"atomEffect((get, set) => {\n // updates whenever `anAtom` changes value\n get(anAtom)\n})","language":"js"}],"relevance":0.022018969,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install optics-ts and jotai-optics","codeDescription":"Run this npm command to install the required packages for the Jotai Optics extension.","codeLanguage":"bash","codeTokens":47,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/optics.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install optics-ts jotai-optics"}],"relevance":0.021999042,"generationDate":"2026-09-28T18:08:09.566Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install dependencies with pnpm","codeDescription":"Installs project dependencies while ignoring the workspace configuration.","codeLanguage":"bash","codeTokens":35,"codeId":"https://github.com/pmndrs/jotai/blob/main/website/README.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"pnpm install --ignore-workspace","language":"bash"}],"relevance":0.02191092,"generationDate":"2026-09-28T18:11:59.802Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-cache","codeDescription":"Install the third-party jotai-cache library to use atomWithCache for caching atom values.","codeLanguage":"shell","codeTokens":40,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/cache.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"shell","code":"npm install jotai-cache"}],"relevance":0.02183199,"generationDate":"2026-09-28T18:08:09.189Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install @tanstack/react-query-devtools","codeDescription":"Install the React Query Devtools package to enable the devtools for jotai-tanstack-query.","codeLanguage":"bash","codeTokens":50,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/query.mdx#_snippet_5","pageTitle":"Unknown","codeList":[{"code":"npm install @tanstack/react-query-devtools","language":"bash"}],"relevance":0.021390986,"generationDate":"2026-09-28T18:10:14.532Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-trpc and tRPC packages","codeDescription":"Install the required packages to use the tRPC extension: jotai-trpc, @trpc/client, and @trpc/server.","codeLanguage":"bash","codeTokens":63,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/trpc.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"bash","code":"npm install jotai-trpc @trpc/client @trpc/server"}],"relevance":0.021288516,"generationDate":"2026-09-28T18:08:50.773Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install Jotai skill globally","codeDescription":"Installs the skill globally for all agents. Use the --global flag.","codeLanguage":"sh","codeTokens":52,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/skill.mdx#_snippet_1","pageTitle":"Jotai Skill Installation and Usage","codeList":[{"language":"sh","code":"npx skills add jotaijs/jotai-skills --skill jotai --global"}],"relevance":0.021183733,"generationDate":"2026-10-29T09:52:52.299Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-babel","codeDescription":"Install the jotai-babel package as a dev dependency for optimal debugging experience.","codeLanguage":"sh","codeTokens":42,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"npm install -D jotai-babel","language":"sh"}],"relevance":0.021061966,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-location","codeDescription":"Install the jotai-location package to use the location and hash atom functions.","codeLanguage":"bash","codeTokens":37,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/location.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"npm install jotai-location","language":"bash"}],"relevance":0.020627327,"generationDate":"2026-09-28T18:08:41.642Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Promise do-notation example","codeDescription":"Shows the async/await equivalent of the atom example, using promises to derive a greeting promise from name and count promises.","codeLanguage":"tsx","codeTokens":116,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/basics/functional-programming-and-jotai.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"tsx","code":"const namePromise = Promise.resolve('Visitor')\nconst countPromise = Promise.resolve(1)\nconst greetingPromise = (async function () {\n const name = await namePromise\n const count = await countPromise\n return (\n

\n Hello, {name}! You have visited this page {count} times.\n

\n )\n})()"}],"relevance":0.020120122,"generationDate":"2026-09-28T18:08:49.725Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithMachine editable text example","codeDescription":"Creates an editable text machine using atomWithMachine. The get function is only available during machine initialization to read other atom values. The component uses the state and send from useAtom to handle double-click editing, commit on blur or Enter, and cancel on Escape.","codeLanguage":"tsx","codeTokens":475,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/xstate.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"$54","language":"tsx"}],"relevance":0.019914651,"generationDate":"2026-09-28T18:09:04.755Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-urql dependencies","codeDescription":"Install the required packages to use the jotai-urql extension.","codeLanguage":"bash","codeTokens":47,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/urql.mdx#_snippet_0","pageTitle":"URQL Extension for Jotai","codeList":[{"language":"bash","code":"npm install jotai-urql @urql/core wonka"}],"relevance":0.019900989,"generationDate":"2026-10-29T09:53:00.292Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install the Jotai skill","codeDescription":"Run this command to install the Jotai skill for migration assistance. Requires a coding agent that supports the 'npx skills add' command.","codeLanguage":"sh","codeTokens":64,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/guides/migrating-to-v3.mdx#_snippet_9","pageTitle":"Migrating to Jotai v3","codeList":[{"language":"sh","code":"npx skills add jotaijs/jotai-skills --skill jotai"}],"relevance":0.019185307,"generationDate":"2026-10-29T09:52:45.088Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"RESET usage example","codeDescription":"Example showing how to use RESET with atomWithReset and a custom atom, including a React component with buttons to reset values.","codeLanguage":"jsx","codeTokens":214,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/resettable.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"jsx","code":"import { atom, useSetAtom } from 'jotai'\nimport { atomWithReset, useResetAtom, RESET } from 'jotai/utils'\n\nconst dollarsAtom = atomWithReset(0)\nconst centsAtom = atom(\n (get) => get(dollarsAtom) * 100,\n (get, set, newValue: number | typeof RESET) =>\n set(dollarsAtom, newValue === RESET ? newValue : newValue / 100)\n)\n\nconst ResetExample = () => {\n const setDollars = useSetAtom(dollarsAtom)\n const resetCents = useResetAtom(centsAtom)\n\n return (\n <>\n \n \n \n )\n}"}],"relevance":0.01878307,"generationDate":"2026-09-28T18:13:01.483Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"createStore()","codeDescription":"Creates a new empty store. The store can be passed to Provider and has methods get, set, and sub for getting, setting, and subscribing to atom values.","codeLanguage":"APIDOC","codeTokens":294,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/core/store.mdx#_snippet_2","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## createStore()\n\n### Description\nCreates a new empty store. The store can be used to pass in `Provider` and has methods `get` for getting atom values, `set` for setting atom values, and `sub` for subscribing to atom changes.\n\n### Method\nFunction call\n\n### Endpoint\nN/A (JavaScript function)\n\n### Parameters\nNone\n\n### Return Value\n- **myStore** (Store) - A new store object with `get`, `set`, and `sub` methods.\n\n### Methods\n- **get(atom)** - Gets the current value of the atom.\n- **set(atom, value)** - Sets the value of the atom.\n- **sub(atom, callback)** - Subscribes to changes of the atom. Returns an unsubscribe function.\n\n### Example\n```jsx\nconst myStore = createStore()\nconst countAtom = atom(0)\nmyStore.set(countAtom, 1)\nconst unsub = myStore.sub(countAtom, () => {\n console.log('countAtom value is changed to', myStore.get(countAtom))\n})\n// unsub() to unsubscribe\nconst Root = () => (\n \n \n \n)\n```"}],"relevance":0.01863731,"generationDate":"2026-09-28T18:08:27.133Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useResetAtom example","codeDescription":"Example component that uses useResetAtom to reset a todo list atom when a button is clicked.","codeLanguage":"jsx","codeTokens":94,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/resettable.mdx#_snippet_7","pageTitle":"Unknown","codeList":[{"code":"import { useResetAtom } from 'jotai/utils'\nimport { todoListAtom } from './store'\n\nconst TodoResetButton = () => {\n const resetTodoList = useResetAtom(todoListAtom)\n return \n}","language":"jsx"}],"relevance":0.018329427,"generationDate":"2026-09-28T18:13:01.483Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Dependency map recalculation example","codeDescription":"Shows that dependencies are recalculated on every run, so the set of dependencies can change based on conditions.","codeLanguage":"js","codeTokens":110,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_12","pageTitle":"Unknown","codeList":[{"code":"atomEffect((get, set) => {\n if (get(isEnabledAtom)) {\n // `isEnabledAtom` and `anAtom` are dependencies\n const aValue = get(anAtom)\n } else {\n // `isEnabledAtom` and `anotherAtom` are dependencies\n const anotherValue = get(anotherAtom)\n }\n})","language":"js"}],"relevance":0.016476216,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithQuery example with React component","codeDescription":"Complete example of using atomWithQuery with a Pokemon API, including creating the tRPC client, defining atoms, and a React component that displays the query result and refreshes.","codeLanguage":"tsx","codeTokens":325,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/trpc.mdx#_snippet_2","pageTitle":"Unknown","codeList":[{"language":"tsx","code":"import { atom, useAtom } from 'jotai'\nimport { httpLink } from '@trpc/client'\nimport { createTRPCJotai } from 'jotai-trpc'\nimport { trpcPokemonUrl } from 'trpc-pokemon'\nimport type { PokemonRouter } from 'trpc-pokemon'\n\nconst trpc = createTRPCJotai({\n links: [\n httpLink({\n url: trpcPokemonUrl,\n }),\n ],\n})\n\nconst NAMES = [\n 'bulbasaur',\n 'ivysaur',\n 'venusaur',\n 'charmander',\n 'charmeleon',\n 'charizard',\n 'squirtle',\n 'wartortle',\n 'blastoise',\n]\n\nconst nameAtom = atom(NAMES[0])\n\nconst pokemonAtom = trpc.pokemon.byId.atomWithQuery((get) => get(nameAtom))\n\nconst Pokemon = () => {\n const [data, refresh] = useAtom(pokemonAtom)\n return (\n

ID: {data.id}

Height: {data.height}

Weight: {data.weight}

\n \n

\n )\n}"}],"relevance":0.016467877,"generationDate":"2026-09-28T18:08:50.773Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithStorage with sessionStorage","codeDescription":"Example using the atomWithStorage util with sessionStorage. createJSONStorage returns undefined on the server to avoid window access.","codeLanguage":"js","codeTokens":97,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/guides/persistence.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"code":"import { atomWithStorage, createJSONStorage } from 'jotai/utils'\n\nconst storage = createJSONStorage(() =>\n typeof window !== 'undefined' ? window.sessionStorage : undefined,\n)\nconst someAtom = atomWithStorage('some-key', someInitialValue, storage)\n","language":"js"}],"relevance":0.016437992,"generationDate":"2026-09-28T18:10:56.716Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithStore example","codeDescription":"Creates a Jotai atom bound to a Redux store, enabling two-way binding. The example defines a reducer, creates a store, and uses the atom in a React component to read state and dispatch actions.","codeLanguage":"jsx","codeTokens":220,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/redux.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"jsx","code":"import { useAtom } from 'jotai'\nimport { atomWithStore } from 'jotai-redux'\nimport { createStore } from 'redux'\n\nconst initialState = { count: 0 }\nconst reducer = (state = initialState, action: { type: 'INC' }) => {\n if (action.type === 'INC') {\n return { ...state, count: state.count + 1 }\n }\n return state\n}\nconst store = createStore(reducer)\nconst storeAtom = atomWithStore(store)\n\nconst Counter = () => {\n const [state, dispatch] = useAtom(storeAtom)\n\n return (\n <>\n count: {state.count}\n \n \n )\n}"}],"relevance":0.016421024,"generationDate":"2026-09-28T18:08:26.433Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Callback-based sequencing example","codeDescription":"Shows a common callback pattern for handling multiple asynchronous results before Promise.all was available.","codeLanguage":"ts","codeTokens":84,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/basics/functional-programming-and-jotai.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"ts","code":"const nPending = 4\nconst results: string[]\nfunction callback(err, data) {\n if (err) throw err\n results.push(data)\n if (results.length === nPending) {\n // do something with results...\n }\n}"}],"relevance":0.016203254,"generationDate":"2026-09-28T18:08:49.725Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"splitAtom todo list example","codeDescription":"Complete example of using splitAtom to manage a todo list. It creates a todosAtom and a todoAtomsAtom, then renders each todo item with inputs and a remove button. The dispatch function from useAtom(todoAtomsAtom) is used to remove items by dispatching { type: 'remove', atom: todoAtom }.","codeLanguage":"tsx","codeTokens":445,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/split.mdx#_snippet_2","pageTitle":"Unknown","codeList":[{"code":"$55","language":"tsx"}],"relevance":0.01608527,"generationDate":"2026-09-28T18:12:15.298Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useAtomCallback example with Counter and Monitor","codeDescription":"Example usage of useAtomCallback. The callback must be stable (wrapped with useCallback). It reads the count atom and updates local state, and the returned function is used in a setInterval to log the current count.","codeLanguage":"jsx","codeTokens":282,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/callback.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"import { useEffect, useState, useCallback } from 'react'\nimport { Provider, atom, useAtom } from 'jotai'\nimport { useAtomCallback } from 'jotai/utils'\n\nconst countAtom = atom(0)\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom)\n return (\n <>\n {count} \n \n )\n}\n\nconst Monitor = () => {\n const [count, setCount] = useState(0)\n const readCount = useAtomCallback(\n useCallback((get) => {\n const currCount = get(countAtom)\n setCount(currCount)\n return currCount\n }, []),\n )\n useEffect(() => {\n const timer = setInterval(async () => {\n console.log(readCount())\n }, 1000)\n return () => {\n clearInterval(timer)\n }\n }, [readCount])\n return

current count: {count}

\n}","language":"jsx"}],"relevance":0.015812501,"generationDate":"2026-09-28T18:11:15.008Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useAtomsDevtools","codeDescription":"Documentation for the useAtomsDevtools hook, including its signature, parameters, usage notes, and an example.","codeLanguage":"APIDOC","codeTokens":338,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_20","pageTitle":"Unknown","codeList":[{"code":"$56","language":"APIDOC"}],"relevance":0.015756823,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useAtomsSnapshot example","codeDescription":"Example usage of useAtomsSnapshot. It shows how to iterate over the snapshot Map to display atom count and each atom's debugLabel and value. Be careful: this hook causes the component to re-render on all state changes.","codeLanguage":"jsx","codeTokens":194,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_19","pageTitle":"Unknown","codeList":[{"code":"import { Provider } from 'jotai'\nimport { useAtomsSnapshot } from 'jotai-devtools/utils'\n\nconst RegisteredAtoms = () => {\n const atoms = useAtomsSnapshot()\n\n return (\n

Atom count: {atoms.size}

\n {Array.from(atoms).map(([atom, atomValue]) => (\n

{`${atom.debugLabel}: ${atomValue}`}

\n ))}\n

\n )\n}\n\nconst App = () => (\n \n \n \n)","language":"jsx"}],"relevance":0.015633589,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"observe","codeDescription":"Documentation for the observe function from jotai-effect, including its signature, parameters, return value, and usage examples.","codeLanguage":"APIDOC","codeTokens":350,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_4","pageTitle":"Unknown","codeList":[{"code":"$57","language":"APIDOC"}],"relevance":0.015617404,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useAtomsDevtools example","codeDescription":"Example usage of useAtomsDevtools. The AtomsDevtools component wraps the app and calls useAtomsDevtools('demo'). The consumed atoms must be in a lower place in the React tree than the component using the hook.","codeLanguage":"jsx","codeTokens":180,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_17","pageTitle":"Unknown","codeList":[{"code":"const countAtom = atom(0);\nconst doubleCountAtom = atom((get) => get(countAtom) * 2);\n\nfunction Counter() {\n const [count, setCount] = useAtom(countAtom);\n const [doubleCount] = useAtom(doubleCountAtom);\n\n ...\n}\n\nconst AtomsDevtools = ({ children }) => {\n useAtomsDevtools('demo')\n return children\n}\n\nexport default function App() {\n return (\n \n \n \n )\n }","language":"jsx"}],"relevance":0.014863388,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useAtomsSnapshot","codeDescription":"Documentation for the useAtomsSnapshot hook, including its signature, parameters, return type, usage notes, and an example.","codeLanguage":"APIDOC","codeTokens":344,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_21","pageTitle":"Unknown","codeList":[{"code":"$58","language":"APIDOC"}],"relevance":0.014709063,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithImmer example","codeDescription":"Creates an atom with an Immer-based write function. The setter accepts an update function that receives a draft and can mutate it directly.","codeLanguage":"jsx","codeTokens":184,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/immer.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"jsx","code":"import { useAtom } from 'jotai'\nimport { atomWithImmer } from 'jotai-immer'\n\nconst countAtom = atomWithImmer({ value: 0 })\n\nconst Counter = () => {\n const [count] = useAtom(countAtom)\n return

count: {count.value}

\n}\n\nconst Controls = () => {\n const [, setCount] = useAtom(countAtom)\n // setCount === update : (draft: Draft) => void\n const inc = () =>\n setCount((draft) => {\n ++draft.value\n })\n return \n}"}],"relevance":0.0144723095,"generationDate":"2026-09-28T18:08:01.959Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomFamily with derived atom","codeDescription":"Example of an atomFamily that creates a derived atom using get and set to update a todosAtom.","codeLanguage":"js","codeTokens":130,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/family.mdx#_snippet_12","pageTitle":"atomFamily - Jotai Family Utility","codeList":[{"language":"js","code":"import { atom } from 'jotai'\nimport { atomFamily } from 'jotai-family'\n\nconst todoFamily = atomFamily((name) =>\n atom(\n (get) => get(todosAtom)[name],\n (get, set, arg) => {\n const prev = get(todosAtom)\n set(todosAtom, { ...prev, [name]: { ...prev[name], ...arg } })\n },\n ),\n)"}],"relevance":0.014084507,"generationDate":"2026-10-29T09:53:44.896Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Provider without store prop","codeDescription":"Example of using Provider without a `store` prop, which uses the default store (provider-less mode).","codeLanguage":"jsx","codeTokens":56,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/core/provider.mdx#_snippet_2","pageTitle":"Unknown","codeList":[{"code":"const Root = () => (\n \n \n \n)","language":"jsx"}],"relevance":0.013888889,"generationDate":"2026-09-28T18:08:24.853Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Async write atom","codeDescription":"Async write atoms start an async request when the write function is called. This example increments a count atom after awaiting something.","codeLanguage":"js","codeTokens":116,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/guides/async.mdx#_snippet_4","pageTitle":"Async Atoms in Jotai","codeList":[{"language":"js","code":"const countAtom = atom(1)\nconst asyncIncrementAtom = atom(null, async (get, set) => {\n // await something\n set(countAtom, get(countAtom) + 1)\n})\n\nconst Component = () => {\n const [, increment] = useAtom(asyncIncrementAtom)\n const handleClick = () => {\n increment()\n }\n // ...\n}"}],"relevance":0.01369863,"generationDate":"2026-10-29T09:52:54.307Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Derived atom with get function","codeDescription":"Example of a derived atom that reads another atom's value and transforms it. Dependencies are tracked when the read function runs.","codeLanguage":"js","codeTokens":56,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/core/use-atom.mdx#_snippet_3","pageTitle":"useAtom - Jotai Core API Documentation","codeList":[{"language":"js","code":"const uppercaseAtom = atom((get) => get(textAtom).toUpperCase())"}],"relevance":0.013513514,"generationDate":"2026-10-29T09:53:25.477Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Using setShouldRemove() to auto-remove old atoms","codeDescription":"Example showing how to register a shouldRemove function to remove atoms older than 1 hour. The function runs immediately and when getting an atom from the cache.","codeLanguage":"js","codeTokens":93,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/family.mdx#_snippet_9","pageTitle":"atomFamily - Jotai Family Utility","codeList":[{"language":"js","code":"// Remove atoms older than 1 hour\ntodoFamily.setShouldRemove((createdAt, param) => {\n return Date.now() - createdAt > 60 * 60 * 1000\n})"}],"relevance":0.013333334,"generationDate":"2026-10-29T09:53:44.896Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Using atomWithToggle with initial value","codeDescription":"Shows how to create an atom with an initial value of true using atomWithToggle. The import path 'XXX' is a placeholder.","codeLanguage":"js","codeTokens":75,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/recipes/atom-with-toggle.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"import { atomWithToggle } from 'XXX'\n\n// will have an initial value set to true\nconst isActiveAtom = atomWithToggle(true)","language":"js"}],"relevance":0.012345679,"generationDate":"2026-09-28T18:10:56.099Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install Jotai skill for specific agents","codeDescription":"Installs the skill for Codex or Claude Code agents. Use the --agent flag to specify the agent.","codeLanguage":"sh","codeTokens":90,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/skill.mdx#_snippet_0","pageTitle":"Jotai Skill Installation and Usage","codeList":[{"language":"sh","code":"npx skills add jotaijs/jotai-skills --skill jotai --agent codex"},{"language":"sh","code":"npx skills add jotaijs/jotai-skills --skill jotai --agent claude-code"}],"relevance":0.011627907,"generationDate":"2026-10-29T09:52:52.299Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithQuery example with Relay environment","codeDescription":"Creates a Relay environment and uses atomWithQuery to fetch countries data, hydrating the environment atom and rendering with Suspense.","codeLanguage":"jsx","codeTokens":394,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/relay.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"$59","language":"jsx"}],"relevance":0.010526316,"generationDate":"2026-09-28T18:08:46.355Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"React Context vs Jotai: Multiple States and Contexts","codeDescription":"Shows the progression from local useState to multiple contexts, then the Jotai equivalent using atoms. The first block demonstrates the React context pattern with multiple providers, and the second shows how Jotai simplifies it with atoms and optional Provider.","codeLanguage":"jsx","codeTokens":429,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/basics/comparison.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"jsx","code":"// 1. useState local state\nconst Component = () => {\n const [state, setState] = useState(0)\n}\n\n// 2. Lift local state up and share it via context\nconst StateContext = createContext()\nconst Parent = ({ children }) => {\n return (\n \n {children}\n \n )\n}\nconst Component = () => {\n const [state, setState] = useContext(StateContext)\n}\n\n// 3. Have multiple states and contexts\nconst State1Context = createContext()\nconst State2Context = createContext()\nconst Parent = ({ children }) => (\n \n \n {children}\n \n \n)\nconst Component1 = () => {\n const [state, setState] = useContext(State1Context)\n}\nconst Component2 = () => {\n const [state, setState] = useContext(State2Context)\n}"},{"language":"jsx","code":"import { Provider, atom, useAtom } from 'jotai'\nconst atom1 = atom(0)\nconst atom2 = atom(0)\n// Optional: you can use Provider's just like useContext,\n// ...but if you only need one,\n// ...you can just omit it and Jotai will use a default one (called Provider-less mode).\nconst Parent = ({ children }) => {\n return {children}\n}\nconst Component1 = () => {\n const [state, setState] = useAtom(atom1)\n}\nconst Component2 = () => {\n const [state, setState] = useAtom(atom2)\n}"}],"relevance":0.010204081,"generationDate":"2026-09-28T18:08:50.076Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install jotai-family package","codeDescription":"Install the jotai-family package using npm.","codeLanguage":"sh","codeTokens":32,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/family.mdx#_snippet_0","pageTitle":"atomFamily - Jotai Family Utility","codeList":[{"language":"sh","code":"npm install jotai-family"}],"relevance":0.01010101,"generationDate":"2026-10-29T09:53:44.896Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"createIsolation example","codeDescription":"Shows how to use `createIsolation` from `jotai-scope` to create isolated contexts for a library, avoiding conflicts with the user's Jotai contexts. The returned `Provider`, `useStore`, `useAtom`, `useAtomValue`, and `useSetAtom` are used within the library's component tree.","codeLanguage":"tsx","codeTokens":146,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/scope.mdx#_snippet_2","pageTitle":"Unknown","codeList":[{"language":"tsx","code":"import { createIsolation } from 'jotai-scope'\n\nconst { Provider, useStore, useAtom, useAtomValue, useSetAtom } =\n createIsolation()\n\nfunction Library() {\n return (\n \n \n \n )\n}"}],"relevance":0.01,"generationDate":"2026-09-28T18:08:46.158Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Create cache directory with mkdir","codeDescription":"Creates a cache directory in the project root, likely required for the development server.","codeLanguage":"bash","codeTokens":37,"codeId":"https://github.com/pmndrs/jotai/blob/main/website/README.md#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"mkdir .cache","language":"bash"}],"relevance":0.009615385,"generationDate":"2026-09-28T18:11:59.802Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install Vite 8 babel dependencies","codeDescription":"Install additional packages required for Vite 8 with the rolldown babel plugin.","codeLanguage":"sh","codeTokens":51,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_4","pageTitle":"Unknown","codeList":[{"code":"npm install -D @rolldown/plugin-babel @babel/core","language":"sh"}],"relevance":0.009433962,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"TypeScript example with explicit types","codeDescription":"Example using explicit TypeScript generics for atomFamily with a primitive atom.","codeLanguage":"ts","codeTokens":87,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/utilities/family.mdx#_snippet_6","pageTitle":"atomFamily - Jotai Family Utility","codeList":[{"language":"ts","code":"import { atom } from 'jotai'\nimport type { PrimitiveAtom } from 'jotai'\nimport { atomFamily } from 'jotai-family'\n\nconst myFamily = atomFamily>((id: number) =>\n atom(id),\n)"}],"relevance":0.009345794,"generationDate":"2026-10-29T09:53:44.896Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Atom do-notation example","codeDescription":"Shows how Jotai atoms can be composed using getter functions, similar to async/await, to derive a greeting atom from name and count atoms.","codeLanguage":"tsx","codeTokens":120,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/basics/functional-programming-and-jotai.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"tsx","code":"const nameAtom = atom('Visitor')\nconst countAtom = atom(1)\nconst greetingAtom = atom((get) => {\n const name = get(nameAtom)\n const count = get(countAtom)\n return (\n

\n Hello, {name}! You have visited this page {count} times.\n

\n )\n})"}],"relevance":0.0091743115,"generationDate":"2026-09-28T18:08:49.725Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"createStore with Provider","codeDescription":"Creates a new empty store with createStore, then demonstrates setting an atom value, subscribing to changes, and passing the store to a Provider. The subscription callback logs the updated value; call unsub() to unsubscribe.","codeLanguage":"jsx","codeTokens":138,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/core/store.mdx#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"const myStore = createStore()\n\nconst countAtom = atom(0)\nmyStore.set(countAtom, 1)\nconst unsub = myStore.sub(countAtom, () => {\n console.log('countAtom value is changed to', myStore.get(countAtom))\n})\n// unsub() to unsubscribe\n\nconst Root = () => (\n \n \n \n)","language":"jsx"}],"relevance":0.009090909,"generationDate":"2026-09-28T18:08:27.133Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"withAtomEffect usage example","codeDescription":"Example of using withAtomEffect to bind an effect to a clone of the target atom. The effect is active while the cloned atom is mounted.","codeLanguage":"js","codeTokens":97,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/effect.mdx#_snippet_8","pageTitle":"Unknown","codeList":[{"code":"import { withAtomEffect } from 'jotai-effect'\n\nconst valuesAtom = withAtomEffect(atom(null), (get, set) => {\n set(valuesAtom, get(countAtom))\n return () => {\n // cleanup\n }\n})","language":"js"}],"relevance":0.009090909,"generationDate":"2026-09-28T18:11:36.957Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Incremental adoption: useQuery vs atomWithQuery","codeDescription":"Shows how to replace an existing useQuery hook with atomWithQuery while using the same QueryClient instance. The first block is the existing hook, the second is the jotai-tanstack-query equivalent.","codeLanguage":"jsx","codeTokens":140,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/query.mdx#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"jsx","code":"// existing useQueryHook\nconst { data, isPending, isError } = useQuery({\n queryKey: ['todos'],\n queryFn: fetchTodoList,\n})\n\n// jotai-tanstack-query\nconst todosAtom = atomWithQuery(() => ({\n queryKey: ['todos'],\n}))\n\nconst [{ data, isPending, isError }] = useAtom(todosAtom)"}],"relevance":0.008928572,"generationDate":"2026-09-28T18:10:14.532Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"freezeAtom usage example","codeDescription":"Example showing how to wrap an atom with freezeAtom to prevent accidental mutations. The atom value is deeply frozen.","codeLanguage":"js","codeTokens":73,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/guides/debugging.mdx#_snippet_5","pageTitle":"Debugging Jotai Atoms","codeList":[{"language":"js","code":"import { atom } from 'jotai'\nimport { freezeAtom } from 'jotai/utils'\n\nconst objAtom = freezeAtom(atom({ count: 0 }))"}],"relevance":0.0088495575,"generationDate":"2026-10-29T09:52:42.721Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Add ReactQueryDevtools with queryClientAtom initialization","codeDescription":"Shows how to add ReactQueryDevtools inside QueryClientProvider while also initializing queryClientAtom with the same queryClient. The QueryClient is configured with staleTime: Infinity.","codeLanguage":"tsx","codeTokens":232,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/query.mdx#_snippet_6","pageTitle":"Unknown","codeList":[{"code":"import {\n QueryClientProvider,\n QueryClient,\n QueryCache,\n} from '@tanstack/react-query'\nimport { ReactQueryDevtools } from '@tanstack/react-query-devtools'\nimport { queryClientAtom } from 'jotai-tanstack-query'\n\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n staleTime: Infinity,\n },\n },\n})\n\nconst HydrateAtoms = ({ children }) => {\n useHydrateAtoms([[queryClientAtom, queryClient]])\n return children\n}\n\nexport const App = () => {\n return (\n \n \n \n \n \n \n \n \n )\n}","language":"tsx"}],"relevance":0.0088495575,"generationDate":"2026-09-28T18:10:14.532Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithQuery usage example","codeDescription":"Creates an atom that implements a standard TanStack Query. The queryKey depends on idAtom, and the queryFn fetches user data from jsonplaceholder. The component uses useAtom to read the atom and handles pending/error states.","codeLanguage":"jsx","codeTokens":224,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/query.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"jsx","code":"import { atom, useAtom } from 'jotai'\nimport { atomWithQuery } from 'jotai-tanstack-query'\n\nconst idAtom = atom(1)\nconst userAtom = atomWithQuery((get) => ({\n queryKey: ['users', get(idAtom)],\n queryFn: async ({ queryKey: [, id] }) => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)\n return res.json()\n },\n}))\n\nconst UserData = () => {\n const [{ data, isPending, isError }] = useAtom(userAtom)\n\n if (isPending) return

\n if (isError) return

Error

\n\n return

{JSON.stringify(data)}

\n}"}],"relevance":0.00877193,"generationDate":"2026-09-28T18:10:14.532Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"atomWithHash usage example","codeDescription":"Example usage of atomWithHash in a React component. It creates a countAtom synced with the URL hash and uses useAtom to display and increment the count.","codeLanguage":"jsx","codeTokens":153,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/extensions/location.mdx#_snippet_4","pageTitle":"Unknown","codeList":[{"code":"import { useAtom } from 'jotai'\nimport { atomWithHash } from 'jotai-location'\n\nconst countAtom = atomWithHash('count', 1)\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom)\n return (\n

count: {count}

\n \n

\n )\n}","language":"jsx"}],"relevance":0.00877193,"generationDate":"2026-09-28T18:08:41.642Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"useAtomsDebugValue example","codeDescription":"Example usage of useAtomsDebugValue. It sets debugLabel on atoms and places the hook in a component (DebugAtoms) inside the Provider. The hook catches all atoms accessible from its location.","codeLanguage":"jsx","codeTokens":220,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/tools/devtools.mdx#_snippet_11","pageTitle":"Unknown","codeList":[{"code":"import { useAtomsDebugValue } from 'jotai-devtools/utils'\n\nconst textAtom = atom('hello')\ntextAtom.debugLabel = 'textAtom'\n\nconst lenAtom = atom((get) => get(textAtom).length)\nlenAtom.debugLabel = 'lenAtom'\n\nconst TextBox = () => {\n const [text, setText] = useAtom(textAtom)\n const [len] = useAtom(lenAtom)\n return (\n \n setText(e.target.value)} />({len})\n \n )\n}\n\nconst DebugAtoms = () => {\n useAtomsDebugValue()\n return null\n}\n\nconst App = () => (\n \n \n \n \n)","language":"jsx"}],"relevance":0.008695652,"generationDate":"2026-09-28T18:14:07.053Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Provider with store prop","codeDescription":"Example of using Provider with a custom store created by `createStore()`. The `store` prop is optional and can be used to provide a specific store for the subtree.","codeLanguage":"jsx","codeTokens":80,"codeId":"https://github.com/pmndrs/jotai/blob/main/docs/core/provider.mdx#_snippet_3","pageTitle":"Unknown","codeList":[{"code":"const myStore = createStore()\n\nconst Root = () => (\n \n \n \n)","language":"jsx"}],"relevance":0.008474576,"generationDate":"2026-09-28T18:08:24.853Z","model":"deepseek/deepseek-v4-flash-0731"}]}