Recoil — A better React state management library?

How good is the new React state management library introduced by Facebook?

Over the years, as React applications have gotten larger in scale and scope, managing state globally has become an increasing burden on developers. So it is no surprise that it seems like new state management libraries pop up seemingly every week. But it is not everyday that Facebook themselves introduce a state management solution. So, is it worth learning a new state management library?

Want to read this story later? Save it in Journal.

Recoil was introduced by Dave McCabe, a Facebook software engineer during an online React Europe 2020 event on YouTube. It is a state management library currently being used internally at Facebook. As of the time of writing, Recoil is still in beta, with no date for and official release.
McCabe explains how working on complex UI on internal projects and tools, global state management became increasingly complex and they hit a performance and efficiency wall.

Recoil.js — A state management library by Facebook

Why is Recoil different?

First of all, Recoil is easy to learn because it is written in a way similar to hooks. Because of this react-ish approach, its APIs feel natural to people accustomed to developing in React using hooks.

Getting started is a matter of wrapping your app with RecoilRoot , declaring your data with a unit called atom and replacing useState with Recoil’s useRecoilState.

Secondly, as we can subscribe to specific pieces of data that a components needs, declare selectors that act as pure functions triggered by changes in the subscribed data and also provide a built-in solution to handle asynchronous data flow.

Recoil’s basics

Atom — They are a single unit of state which are updatable and subscribable. It can be thought of as a regular react state, and when any component needs access to that state value they can subscribe to it. When an atom is updated. each subscribed member is updated with the new value. Multiple components can subscribe to a single atom and share a single state.

To create an atom we need to define a unique key, which will be used for persistence and debugging and a default value. The default value can be a static value, a function or even an async function.

import { atom } from 'recoil';
export const nameState = atom({
  key: 'nameState',
  default: 'John Doe',
})

To read data from an atom, we use a hook called useRecoilState , which is similar to react’s useState hook but can be shared between components.

import { useRecoilState } from 'recoil';
import { nameState } from './atom';
const NameInput = () => {
  const [name, setName] = useRecoilState(nameState);
  const onChange = event => {
    setName(event.target.value);
  }
  return (
    <>
      <input type="text" value={name} onChange={onChange} />
      Name: {name}
    </>);
}

Selectors — They are pure functions which accept atoms or other selectors as input. When an “upstream” atom or selector is updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms but more than a state, selectors are used to calculate derived data that is based on state.So, a minimal set of states is stored as atoms and everything else is functionally computed. Selectors and atoms have a similar interface and can be used interchangeably.

import { selector } from 'recoil';
import { nameState } from ‘./atom’;
const nameGreetingState = selector({
  key: 'nameGreetingState',
  get: ({get}) => {
          const currentName = get(nameState);
          return `Hello! It's good to see you, ${currentName}`;
       }),
  set: 
});

get property is a mandatory function that is to be computed. It can access the value of other items and selectors using the get argument passed to it. To read data from a selector, we use useRecoilValue .

import { useRecoilState, useRecoilValue } from 'recoil';
import { nameState } from './atom';
import { nameGreetingState } from './selector';
const NameInput = () => {
  const [name, setName] = useRecoilState(nameState);
  const greeting = useRecoilValue(nameGreetingState);
  const onChange = event => {
    setName(event.target.value);
  }
return (
    <>
      <p>{greeting}</p>
      <input type="text" value={name} onChange={onChange} />
    </>);
}

Optionally, a set function can also be assigned which can update one or more atoms. For the set function, useSetRecoilState is used which writes data to a state without reading it. If a component used the useSetRecoilState() hook to get the setter, it would also subscribe to updates and re-render when the atom or selector updated.

import {atom, useSetRecoilState} from 'recoil';
const nameState = atom({
  key: 'nameState',
  default: ['Ella', 'Chris', 'Paul'],
});
function NameInput() {
  const [name, setName] = useState('');
  const setNameState = useSetRecoilState(nameState);
  
  const addName = () => {
    setNameState(existingNames => [...existingNames, name]);
  };
  const onChange = (e) => {
    setName(e.target.value);
  };
  return (
    <>
      <input type="text" value={name} onChange={onChange} />
      <button onClick={addName}>Add Name</button>
   </>);
}

In conclusion

Recoil manages to hit the nail right on the head when it is described as React-ish. I had only used Redux as my main state management library, so using Recoil felt like a breathe of fresh air. The learning curve is minimal for someone acquainted with React hooks. There isn’t a need to learn new design patterns or set up extensive boiler plates to manage your states. You might think the some of the syntax and terminology is confusing, you could argue the same about setting up your Redux boiler plate.There is still so much yet to explore in Recoil and I haven’t even touched on the asynchronous data flow handling.

Because it is still in beta, so many things are uncertain at this point, like how will it scale for larger projects, will it actually be adopted by the community and so many other unknown variables.

I cannot say that this will be the future of cleaner state management for React but it a good place to start.

Extra Reading

• Recoil documentation
• Recoil: State Management for Today’s React — Dave McCabe at @ReactEurope 2020

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.