Features
- Atomic state model with atoms and selectors
- Async selectors for data fetching
- React Concurrent Mode compatible
- Atom families for dynamic state
- Snapshot API for state observation
Pros
- Natural fit with React's component model
- Fine-grained subscriptions minimize re-renders
- Async data handling with selectors
Cons
- Still experimental — no stable 1.0 release
- Development has slowed significantly
- Jotai provides a simpler alternative with similar concepts
Overview
Recoil is an experimental state management library created by Meta that introduced the atomic state model to the React ecosystem. It provides atoms (units of state) and selectors (derived state) that integrate naturally with React’s rendering model, including Concurrent Mode.
Recoil was influential in popularizing the atomic state pattern, where state is composed from small, independent atoms rather than managed in a centralized store. However, development has slowed and the library remains experimental. Jotai was directly inspired by Recoil and provides a simpler, more actively maintained alternative.
When to Use
Recoil may be suitable for existing projects already using it. For new projects, Jotai is generally recommended as a more actively maintained alternative with a simpler API and similar atomic state concepts.
Getting Started
npm install recoilimport { atom, selector, useRecoilState, useRecoilValue } from "recoil";
const countState = atom({ key: "count", default: 0 });
const doubledState = selector({
key: "doubled",
get: ({ get }) => get(countState) * 2,
});
function Counter() {
const [count, setCount] = useRecoilState(countState);
const doubled = useRecoilValue(doubledState);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count} (doubled: {doubled})
</button>
);
}