Recoil.js: Facebook’s new solution for State Management in React.

Recoil.js is a fresh solution from the Facebook team that introduces a whole new approach to state management. The use of atoms and selectors.

Unlike Redux which uses a general state container to store the data of the entire app, Recoil uses atoms to store the data in concise independent units. It then subscribes to the atom and changes based on the state of the atom. Selectors are simply a way to transform the data in atoms. The selector subscribes to one or more atoms while a component subscribes to it. So when the value of the atom changes, the new state of the selector is derived from the atom or atoms and the dependent component in turn reacts to the change in value of the selector. It is quite direct and easy. No need for a lot of boilerplate code.

Basically, the first step is to define your atoms and selectors. Here’s what an atom definition looks like:

import { atom } from "recoil";
export const historyState = atom({
  key: "historyState",
  default: []
});

This atom is going to help us handle a theoretical search history. First thing we need is to give the atom a unique key value and a default value.

Next up we have to define our selectors:

import { selector, selectorFamily } from "recoil";
import { historyState } from "./atoms";
export const countState = selector({
  key: "countState",
  get({ get }) {
    const history = get(historyState);
    return history.length;
  }
});
export const countByRecordState = selectorFamily({
  key: "countByRecordState",
  get: record => ({ get }) => {
    const history = get(historyState);
    return history.filter(item => item === record).length;
  }
});

Above we define two kinds of selectors. The one initialised with selector does not receive input and only depends on atoms for data. The one initialised with selectorFamily can receive input and also works with atoms to derive its data. The countState selector returns the total number of items in the historyState atom. The countByRecordState selector returns the total number of occurrences of a particular word in the historyState atom.

import { useRecoilValue, useSetRecoilState, useRecoilState } from "recoil";
import { historyState } from "./atoms";
import { countState, countByRecordState } from "./selectors";
/* In a component you can use these hooks to access the data in your atoms and selectors */
// to access a getter for the historyState atom
const historyValue = useRecoilValue(historyState);
// to access a setter for the historyState atom instead
const historySetter = useSetRecoilState(historyState);
// to access a getter and setter for the historyState atom
const [history, setHistory] = useRecoilState(historyState);
// You subscribe to selectors the same way you subscribe to atoms
const count = useRecoilValue(countState);
const countByRecord = useRecoilValue(countByRecordState("item"));

By using useRecoilValue you can create a getter for a certain atom or selector. useSetRecoilState creates a setter for an atom or selector. while useRecoilState provides both a setter and getter for a corresponding atom or selector.

Hurray!! 👏👏 This is all you need to start using Recoil.js in your React app. Remember to visit the docs at http://recoiljs.org