[React] Display Computed Data Using Recoil Selectors in React

In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

 

 Define a 'atom':

const order = atom({
  key: "order",
  default: ["garlic bread"] // on the house!
});

 

Use a atom:

import { atom, useRecoilValue, selector } from "recoil";

  const myOrder = useRecoilValue(order);

  return (
    <div className="App">
      <h1>The Brunch Place</h1>
      {myOrder.map((food, i) => (
        <p key={i}>{food}</p>
      ))}
    </div>
  );

 

Compute value based on state: using selector:

import { atom, useRecoilValue, selector } from "recoil";

const orderInfo = selector({
  key: "orderInfo",
  get: ({ get }) => {
    return {
      totalPrice: get(order)
        .map((food) => priceList[food])
        .reduce((current, sum) => current + sum, 0)
    };
  }
});

 

Use selector:

const orderStats = useRecoilValue(orderInfo);

  <h4>Total Price: ${orderStats.totalPrice} </h4>

 

Full code:

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

const priceList = {
  coffee: 2,
  "garlic bread": 0,
  pancakes: 10
};

const order = atom({
  key: "order",
  default: ["garlic bread"] // on the house!
});

const orderInfo = selector({
  key: "orderInfo",
  get: ({ get }) => {
    return {
      totalPrice: get(order)
        .map((food) => priceList[food])
        .reduce((current, sum) => current + sum, 0)
    };
  }
});

export default function App() {
  const myOrder = useRecoilValue(order);
  const orderStats = useRecoilValue(orderInfo);

  return (
    <div className="App">
      <h1>The Brunch Place</h1>
      {myOrder.map((food, i) => (
        <p key={i}>{food}</p>
      ))}
      <h4>Total Price: ${orderStats.totalPrice} </h4>
    </div>
  );
}