# Recoil — Experimental State Management Library for React by Meta

> A state management library from Meta that uses atoms and selectors to manage shared state in React apps with minimal boilerplate and fine-grained re-renders.

## Install

Save as a script file and run:

# Recoil — Experimental State Management Library for React by Meta

## Quick Use
```bash
npm install recoil
```
```jsx
import { RecoilRoot, atom, useRecoilState } from 'recoil';
const countState = atom({ key: 'countState', default: 0 });
function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
export default function App() {
  return <RecoilRoot><Counter /></RecoilRoot>;
}
```

## Introduction
Recoil is a state management library for React developed by Meta. It introduces atoms (units of shared state) and selectors (derived state) that integrate naturally with React's concurrent features. Components subscribe only to the atoms they read, enabling fine-grained re-renders without manual optimization.

## What Recoil Does
- Manages shared state across React components using atoms
- Computes derived state with selectors that auto-update on dependency changes
- Provides hooks (`useRecoilState`, `useRecoilValue`, `useSetRecoilState`) that feel like `useState`
- Supports asynchronous selectors for data fetching
- Enables state persistence and time-travel debugging via snapshots

## Architecture Overview
Recoil maintains a directed graph of atoms and selectors. When an atom value changes, Recoil traverses the graph to determine which selectors and components need updates. This graph-based approach avoids the top-down re-render pattern of context-based solutions. RecoilRoot at the app root provides the state store, and each atom key must be globally unique to enable serialization and debugging.

## Self-Hosting & Configuration
- Install via npm: `npm install recoil`
- Wrap your app in `<RecoilRoot>` at the root level
- Define atoms in separate files and import them where needed
- Use `useRecoilState` for read-write and `useRecoilValue` for read-only access
- Enable persistence with `effects` on atoms for localStorage or URL sync

## Key Features
- Minimal boilerplate compared to Redux or MobX
- Fine-grained subscriptions prevent unnecessary re-renders
- Async selectors with built-in Suspense support
- Snapshot API for state inspection and time-travel debugging
- Atom effects for side effects like persistence and logging

## Comparison with Similar Tools
- **Zustand** — simpler API, no provider required, more actively maintained
- **Jotai** — similar atomic model, smaller bundle, more actively developed
- **Redux Toolkit** — industry standard with middleware, more boilerplate
- **MobX** — observable-based, auto-tracks dependencies, different mental model
- **Valtio** — proxy-based, mutable-style API, smaller footprint

## FAQ
**Q: Is Recoil still maintained?**
A: Recoil is in maintenance mode. Meta has not committed to further feature development, but it remains usable for existing projects.

**Q: How is Recoil different from React Context?**
A: Context triggers re-renders for all consumers on any change. Recoil only re-renders components that subscribe to the specific atom that changed.

**Q: Can I use Recoil with React Native?**
A: Yes, Recoil works with React Native since it uses only React primitives.

**Q: What should I migrate to if Recoil is no longer updated?**
A: Jotai offers the closest API with active maintenance. Zustand is another popular lightweight alternative.

## Sources
- https://github.com/facebookexperimental/Recoil
- https://recoiljs.org

---
Source: https://tokrepo.com/en/workflows/asset-2e409fb5
Author: Script Depot