Getting started with Recoil - Facebook State Management Library for React

What is RecoilJS?

RecoilJS is a state management library for React apps.

Highlights

• Thinks like React and flexible with shared state;
• Pure functions and efficient subscriptions;
• Comes with persistence, routing, time-travel debugging;

Concepts

Atoms

Atoms are units of state and can be created at runtime. 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.

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

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.

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

 

The Counter is the new Hello World

Yesterday I was trying out the new Facebook state library and I ended up making a Codesandbox with a simple counter trying out all the features.

RecoilRoot

It provides the context in which atoms have values. Must be an ancestor of any component that uses any Recoil hooks.

import React from "react";
import { RecoilRoot } from "recoil";

export default function App() {
  return (
    <RecoilRoot>
      <h1>Recoil counter</h1>
      <Counter />
      <CounterInfo />
    </RecoilRoot>
  );
}

Atom

Atoms need a unique key, which is used for debugging, persistence, and for certain advanced APIs that let you see a map of all atoms. It is an error for two atoms to have the same key, so make sure they're globally unique. Like the React component state, they also have a default value.

import { atom } from "recoil";

const countState = atom({
  key: "countState",
  default: 0
});

Selector

Selectors are used to calculating derived data that is based on state. Since selectors keep track of what components need them and what state they depend on, they make this functional approach more efficient.

import { selectoratom } from "recoil";

const countNextState = selector({
  key: "counterNextState",
  get: ({ get }) => {
    return get(countState) + 1;
  }
});

useRecoilState

Returns a tuple where the first element is the value of state and the second element is a setter function that will update the value of the given state when called.

import React from "react";
import { useRecoilState } from "recoil";

const Counter = () => {
  const [count, setCount] = useRecoilState(countState);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

useRecoilValue

Returns the value of the given Recoil state. This hook will implicitly subscribe to the component to the given state. This component shares the same atom making the count state global.

import React from "react";
import { useRecoilValue } from "recoil";

const CounterInfo = () => {
  const count = useRecoilValue(countNextState);
  return <p>the next number is {count}</p>;
};

Counter Demo using Recoil

https://codesandbox.io/embed/recoil-counter-demo-b0ghg?fontsize=14&hidenavigation=1&theme=dark

What is UpStamps?

UpStamps is a Feature Flag Management Platform to separate code from different environments and projects.

UpStamps helps teams manage their projects using feature management with a Central control to progressively deliver features to users with confidence.

Sign Up for Free

🛳 Ship when you're ready
🚀 Accelerate feature release
🙈 Hide unfinished features

Useful links about UpStamps:

• About
• Documentation
• Start Testing in Production