[React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom

Recoil allows us to use atoms in order to store pieces of state. More often than not in our apps we need to use data that derives from our application state (for instance to multiply height and width stored within a state to calculate area of an element).

Luckily Recoil provides us with a powerful tool to automatically re-calculate derived state value whenever an piece of state changes - 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.

In this quick lesson we're going to learn how to use a selector in order to automatically calculate a square of a number whenever a value stored within an atom is going to change

  
import React from "react";
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil";
import "./App.css";

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

const squareState = selector({
  key: "squareState",
  get: ({ get }) => {
    return get(numState) ** 2;
  },
});

function Counter() {
  const [number, setNumber] = useRecoilState(
    numState
  );

  return (
    <button
      onClick={() => setNumber(number + 1)}
    >
      Increment!
    </button>
  );
}

function Square() {
  const squareNumber = useRecoilValue(
    squareState
  );
  return <div>Square: {squareNumber}</div>;
}

function Display() {
  const number = useRecoilValue(numState);
  return <div>Number: {number}</div>;
}

function App() {
  return (
    <RecoilRoot>
      <div className="App">
        <h1>Recoil!</h1>
        <Counter />
        <Display />
        <Square />
      </div>
    </RecoilRoot>
  );
}

export default App;