Jotai atomic state management patterns. Use when implementing fine-grained reactive state.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill covers Jotai atomic state management for React applications.
Use this skill when:
ATOMS ARE PRIMITIVES - Build complex state from simple atoms. Components subscribe only to atoms they use.
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
// Primitive atom
const countAtom = atom(0);
// Usage
function Counter(): React.ReactElement {
const [count, setCount] = useAtom(countAtom);
return (
<button onClick={() => setCount((c) => c + 1)}>
Count: {count}
</button>
);
}
// Read-only usage
function CountDisplay(): React.ReactElement {
const count = useAtomValue(countAtom);
return <span>Count: {count}</span>;
}
// Write-only usage
function IncrementButton(): React.ReactElement {
const setCount = useSetAtom(countAtom);
return <button onClick={() => setCount((c) => c + 1)}>+</button>;
}
const countAtom = atom(0);
// Derived atom (read-only)
const doubleCountAtom = atom((get) => get(countAtom) * 2);
const isEvenAtom = atom((get) => get(countAtom) % 2 === 0);
// Multiple dependencies
const usersAtom = atom<User[]>([]);
const filterAtom = atom('');
const filteredUsersAtom = atom((get) => {
const users = get(usersAtom);
const filter = get(filterAtom).toLowerCase();
if (!filter) return users;
return users.filter((user) =>
user.name.toLowerCase().includes(filter)
);
});
const celsiusAtom = atom(0);
// Read-write derived atom
const fahrenheitAtom = atom(
(get) => get(celsiusAtom) * (9 / 5) + 32,
(get, set, newFahrenheit: number) => {
set(celsiusAtom, (newFahrenheit - 32) * (5 / 9));
}
);
// Usage - both read and write work
function TemperatureConverter(): React.ReactElement {
const [celsius, setCelsius] = useAtom(celsiusAtom);
const [fahrenheit, setFahrenheit] = useAtom(fahrenheitAtom);
return (
<div>
<input
type="number"
value={celsius}
onChange={(e) => setCelsius(Number(e.target.value))}
/>
°C =
<input
type="number"
value={fahrenheit}
onChange={(e) => setFahrenheit(Number(e.target.value))}
/>
°F
</div>
);
}
// Async read atom
const userAtom = atom(async () => {
const response = await fetch('/api/user');
return response.json() as Promise<User>;
});
// Usage with Suspense
function UserProfile(): React.ReactElement {
const user = useAtomValue(userAtom);
return <h1>{user.name}</h1>;
}
function App(): React.ReactElement {
return (
<Suspense fallback={<Loading />}>
<UserProfile />
</Suspense>
);
}
// Async with dependencies
const userIdAtom = atom('1');
const userDataAtom = atom(async (get) => {
const userId = get(userIdAtom);
const response = await fetch(`/api/users/${userId}`);
return response.json() as Promise<User>;
});
const todosAtom = atom<Todo[]>([]);
// Write-only atom for actions
const addTodoAtom = atom(null, (get, set, text: string) => {
const newTodo: Todo = {
id: crypto.randomUUID(),
text,
completed: false,
};
set(todosAtom, [...get(todosAtom), newTodo]);
});
const toggleTodoAtom = atom(null, (get, set, id: string) => {
set(
todosAtom,
get(todosAtom).map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
});
const removeTodoAtom = atom(null, (get, set, id: string) => {
set(
todosAtom,
get(todosAtom).filter((todo) => todo.id !== id)
);
});
// Usage
function AddTodo(): React.ReactElement {
const addTodo = useSetAtom(addTodoAtom);
const [text, setText] = useState('');
const handleSubmit = (e: FormEvent): void => {
e.preventDefault();
if (text.trim()) {
addTodo(text);
setText('');
}
};
return (
<form onSubmit={handleSubmit}>
<input value={text} onChange={(e) => setText(e.target.value)} />
<button type="submit">Add</button>
</form>
);
}
import { atomFamily } from 'jotai/utils';
// Create atoms dynamically
const todoAtomFamily = atomFamily((id: string) =>
atom<Todo | null>(null)
);
// Usage
function TodoItem({ id }: { id: string }): React.ReactElement {
const [todo, setTodo] = useAtom(todoAtomFamily(id));
if (!todo) return null;
return (
<div>
<input
type="checkbox"
checked={todo.completed}
onChange={() =>
setTodo({ ...todo, completed: !todo.completed })
}
/>
{todo.text}
</div>
);
}
import { atomWithStorage } from 'jotai/utils';
// Persisted to localStorage
const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light');
const settingsAtom = atomWithStorage('settings', {
notifications: true,
language: 'en',
});
// Usage - automatically syncs with localStorage
function ThemeToggle(): React.ReactElement {
const [theme, setTheme] = useAtom(themeAtom);
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
{theme}
</button>
);
}
import { atomWithReset, useResetAtom, RESET } from 'jotai/utils';
const formAtom = atomWithReset({
name: '',
email: '',
message: '',
});
function ContactForm(): React.ReactElement {
const [form, setForm] = useAtom(formAtom);
const resetForm = useResetAtom(formAtom);
// Or use RESET symbol
// setForm(RESET);
return (
<form>
<input
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
/>
<button type="button" onClick={resetForm}>
Reset
</button>
</form>
);
}
import { atomWithQuery } from 'jotai-tanstack-query';
const userIdAtom = atom('1');
const userAtom = atomWithQuery((get) => ({
queryKey: ['user', get(userIdAtom)],
queryFn: () => fetchUser(get(userIdAtom)),
}));
function UserProfile(): React.ReactElement {
const [{ data: user, isLoading }] = useAtom(userAtom);
if (isLoading) return <Loading />;
return <div>{user?.name}</div>;
}
import { useAtomsDebugValue } from 'jotai-devtools';
function App(): React.ReactElement {
useAtomsDebugValue(); // Shows atoms in React DevTools
return <Main />;
}
| Feature | Jotai | Zustand |
|---|---|---|
| Model | Bottom-up (atoms) | Top-down (store) |
| Subscriptions | Automatic (fine-grained) | Manual (selectors) |
| Provider | Optional | Not needed |
| Async | Built-in | Manual |
| DevTools | Separate package | Middleware |
| Best for | Complex dependencies | Simple global state |