Atomic State: Recoil and Jotai
In this page:
// Recoil
const nameAtom = atom({ key: "uniqueKey", default: initial });
const [value, setValue] = useRecoilState(nameAtom);
// Jotai
const nameAtom = atom(initial);
const [value, setValue] = useAtom(nameAtom);What 'Atomic' State Means
Instead of one large state object (as in Redux or a single Context), atomic libraries split state into many small, independent pieces called atoms.
Each atom is its own unit of state that components can read and update individually, without touching unrelated data.
Example: What 'Atomic' State Means
// Run in your local React project (npm install required)
// Recoil
import { atom, useRecoilState } from 'recoil';
const countAtom = atom({ key: 'count', default: 0 });
function Counter() {
const [count, setCount] = useRecoilState(countAtom);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Recoil's RecoilRoot Requirement
Recoil needs the app wrapped in a single <RecoilRoot> component, similar to Redux's Provider or React Router's BrowserRouter, so its internal atom-tracking system can function. Without it, useRecoilState and related hooks won't work.
Example: Recoil's RecoilRoot Requirement
// Run in your local React project (npm install required)
import { RecoilRoot } from 'recoil';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<RecoilRoot>
<App />
</RecoilRoot>
);⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Jotai: Atomic State Without a Provider
Jotai follows a similar atomic philosophy to Recoil but is designed to need no wrapping Provider at all — atoms defined with atom() can be used directly with the useAtom hook anywhere in the tree, making setup even lighter.
Example: Jotai: Atomic State Without a Provider
// Run in your local React project (npm install required)
// Jotai — no Provider required
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Creating a new atom definition inside a component's render instead of at module scope, which resets it constantly.
- Forgetting Recoil requires wrapping the app in <RecoilRoot>, similar to Redux's Provider.
- Treating atoms as if they must hold primitive values only — they can hold objects and arrays just fine.
- Atomic state management splits state into small, independent units called atoms instead of one big store.
- Recoil requires a <RecoilRoot> wrapper; Jotai does not require any wrapper at all.
- Components subscribe to individual atoms, so changing one atom only re-renders components using that specific atom.
- Both libraries are designed to feel closer to plain useState than Redux's action/reducer model.
Requires npm install recoil or npm install jotai — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: