recoil

Facebook's experimental state library for React — derived state and shared atoms with a hooks-first API.

recoil

React

Facebook's experimental state library for React — derived state and shared atoms with a hooks-first API.

npmGitHubDocs

Fit

Bundle (gzip)

23.3 kB

76.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Context re-renders everything under a provider, and lifting shared state up creates prop-drilling and coupling. Modeling derived values (a filtered list, a computed total) that stay in sync with several sources is awkward with plain hooks.

What It Does

Recoil introduces atoms (units of shared state) and selectors (pure derived state, sync or async) that plug into React with hooks like useRecoilState. Components subscribe only to the atoms they use, so updates are granular, and selectors memoize derived computations automatically.

Installation

bash
npm install recoil

Usage Example

jsx
import { atom, selector, useRecoilState, useRecoilValue, RecoilRoot } from 'recoil';

const tempC = atom({ key: 'tempC', default: 20 });
const tempF = selector({
  key: 'tempF',
  get: ({ get }) => get(tempC) * 1.8 + 32,
});

function Temp() {
  const [c, setC] = useRecoilState(tempC);
  const f = useRecoilValue(tempF);
  return <input value={c} onChange={(e) => setC(+e.target.value)} placeholder={`${f}°F`} />;
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.