What it is
Recoil models state as a graph of atoms and selectors. Atoms are shared pieces of state with a unique key, and selectors derive values from atoms or other selectors.
Atoms and selectors
- Atom: a writable unit of state any component can subscribe to.
- Selector: a pure function of other atoms and selectors that computes a derived value, cached by its inputs.
Selectors can be synchronous or asynchronous. An async selector returns a promise, integrating naturally with suspense for data loading.
The data flow graph
Components read with hooks that subscribe them to specific atoms or selectors. When an atom changes, Recoil recomputes only the selectors downstream and re renders only the subscribed components.
- Each atom has a unique key.
- Selectors memoize on their dependencies.
- Async selectors plug into suspense.
Key idea
Recoil forms a reactive graph where atoms hold state and pure selectors derive cached values, updating only the parts of the tree that depend on a change.