recoil

What is recoil?

Recoil is a state management library for React applications. It provides a way to manage and share state across components with a minimal API and a focus on performance and scalability.

What are recoil's main functionalities?

Atoms

Atoms are units of state in Recoil. They can be read from and written to from any component. Components that read the value of an atom will re-render when the atom's value changes.

const { atom } = require('recoil');

const textState = atom({
  key: 'textState',
  default: '',
});

Selectors

Selectors are pure functions that transform state. They can compute derived state based on atoms or other selectors. Components that read the value of a selector will re-render when the selector's value changes.

const { selector } = require('recoil');

const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

RecoilRoot

RecoilRoot is a component that provides the Recoil state context to its descendants. It must wrap the part of your application that uses Recoil state.

const { RecoilRoot } = require('recoil');
const React = require('react');
const ReactDOM = require('react-dom');

function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Other packages similar to recoil

redux

Redux is a popular state management library for JavaScript applications. It uses a single global store and actions to update the state. Compared to Recoil, Redux has a more complex setup and requires more boilerplate code, but it is highly flexible and has a large ecosystem of middleware and tools.

mobx

MobX is a state management library that uses observables to track state changes. It provides a more reactive and less boilerplate approach compared to Redux. MobX is similar to Recoil in that it allows for fine-grained reactivity, but it uses a different paradigm based on observables and decorators.

zustand

Zustand is a small, fast, and scalable state management library for React. It uses hooks to manage state and provides a simple API. Compared to Recoil, Zustand is more lightweight and has a simpler API, but it may not offer as many features for complex state management scenarios.

README

Recoil ·

Recoil is an experimental state management framework for React.

Website: https://recoiljs.org

Documentation

Documentation: https://recoiljs.org/docs/introduction/core-concepts

API Reference: https://recoiljs.org/docs/api-reference/core/RecoilRoot

Tutorials: https://recoiljs.org/resources

Installation

The Recoil package lives in npm. Please see the installation guide

To install the latest stable version, run the following command:

npm install recoil

Or if you're using yarn:

yarn add recoil

Or if you're using bower:

bower install --save recoil

Contributing

Development of Recoil happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving Recoil.

• Code of Conduct
• Contributing Guide

License

Recoil is MIT licensed.