Getting started with React Recoil

18-May-20201 Min Read( Updated: 08-Aug-2020 )

Recoil is a state management library for React by facebook.

Overview#

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously

  • Atoms#

    Atoms are units of state. They're updateable and subscribeable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

  • Selectors#

    A selector is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change.

    Selectors are used to calculate derived data that is based on state. This lets us avoid redundant state, usually obviating the need for reducers to keep state in sync and valid. Instead, a minimal set of state is stored in atoms, while everything else is efficiently computed as a function of that minimal state. Since selectors keep track of what components need them and what state they depend on, they make this functional approach more efficient.

    From the point of view of components, selectors and atoms have the same interface and can therefore be substituted for one another.

TLDR

Atom: Single value/state/object.

Selector: Derived/Computed value based on an atom's current value or another selector value.

Installation#

Create an atom#

Let's start with creating an atom which holds an input number. Since an atom is a global value, it requires a unique key.

Create selectors#

Now we have an atom, let's create two selectors which uses the previously defined atom. Since selectors are global values, each one requires a unique key.

  • addTenSelector : This function will increment the inputNumber by 10.
  • squareOfAddTenSelector : This one demonstrates the usage of a selector inside a selector. This will calculate the squared value of addTenSelector.

Final App#

Now let's move on to creating our app using recoil.

If you had followed this tutorial, now your app will look like this. Try changing the input number and see the selectors and atoms in action.!

PrimaryComponent

inputNumber = 0

addTenSelector = 10

squareOfAddTenSelector = 100


SecondaryComponent

Since recoil offers global state. This component will receive the state updates as well

inputNumber = 0

addTenSelector = 10

squareOfAddTenSelector = 100