Super useful a state management library "Recoil"

Have you ever used a state management library called Recoil?

This is super useful and easy to understand.

This article explains the basics of Recoil.
Please click the Like button and Save button if you like this article.

What you will learn in this article

• RecoilRoot
• Atom
• Selectors

What is Recoil?

Recoil is a React state management library created by Facebook.
This is an experimental state management framework for React.
Not officially released yet.

RecoilRoot

To use Recoil, you need to enclose the outside of the target scope with a RecoilRoot component.
If you're enclosing the root component with a RecoilRoot component allows for global State management.

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

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atom

Atom is necessary for state management.
Atom set a unique ID for each Atom with key and an initial value with default.

export const textState = atom({
  key: 'textState',
  default: '',
});

Components that need to read from and write to an atom could use three way.
If you only want to get the value, you can use useRecoilValue.
If you only want to set the value, you can use useSetRecoilValue.
You can use useRecoilState () to both retrieve and update the state.

Here is how to use useRecoilState.

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  /* useRecoilState determines from which Atom to retrieve
 the value by passing the Key specified in Atom as an
 argument.*/
 // [value, setValueFunction] = useStateRecoil(Key)
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Here is how to use useSetRecoilValue and useRecoilValue.

function TextInput() {

  const text = useRecoilValue(textState);

  const setText = useSetRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

Selector can return values processed from Atom state, or process and update Atom state.
Like Atom, each Selector is assigned a unique ID using key.
The "get" function returns the processed value of the state, and the "set" function processes the state and updates it.
Each time Atom is updated, it is render.

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

Conclusion

Recoil can be used to manage values globally or only between specific components.
While Redux and others have complex syntax and take time to get used to, Recoil is simple and easy to use for state management.

ref: Recoil