Configure recoil.js to your React project

React State Management with Recoil

What is recoil.js to React?

recoil.js is the state management library for React. Hence it can be used instead of usestate in your React Project.

How are they different from each other?

• It seems like React ( global version of useState)
• You can manage your state very easily.
• It has very simple concepts like atom and selector.
• Very clean and simple working model.

Installation:

• for npm package: npm install recoil
• for yarn package: yarn add recoil

Implementing State

So basically there are two concepts introduced in Recoil i.e. atom and selectors.

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

const App = () => {
  return (
    <RecoilRoot>
      <Component1/>
      <Component2/>
      //...
    </RecoilRoot>
  );
}

Atom:

An atom represents a piece of state. Atoms can be understood as something that can be read from and written to from any component.
Components that are associated with this atom will automatically be re-rendered once the atom is updated.

const someState = atom({
  key: 'someUniquekey', // unique for recoil internal reasons
  default: '', // initial value of state/atom
});

Selectors:

A selector represents a piece of derived state. You can think of this as the output of passing state to a function that modifies the given state in some way.

const charCountState = selector({
  key: 'charCountState', // Have to Be Unique
  get: ({get}) => {
    const text = get(someState); //pass a atom in this function
    return text.length;
  },
});

Using State:

There are two ways to get the declared state into our components. i.e. by useRecoilState or useSetRecoilState, useRecoilValue.

useRecoilValue:

Whenever you want to use the value of the state but don’t want to update it in the whole component.

import { useRecoilValue } from 'recoil';
const CharacterCount = () => {
    const count = useRecoilValue(charCountState);
    //Name of the Atom or selector
    return <>Character Count: {count}</>;
}

useRecoilState:

Whenever you want to use the value of the state and also want to update it globally through the component itself.

import { useRecoilState } from 'recoil';
const TextInput = () => {
    const [text, setText] = useRecoilState(someState);

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

    return (
        <div>
            <input type="text" value={text} onChange={onChange} />
            <br />
      Value of the state : {text}
        </div>
    );
}

useSetRecoilState:

Returns a setter function that can be used asynchronously to change the state. The setter may either be passed a new value or an updater function that receives the previous value as an argument.

import { useSetRecoilState } from 'recoil';
const TextInput = () => {
    const setText = useSetRecoilState(someState); //CHANGE HERE

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

    return (
        <>
          //OTHER LOGIC
        </>
    );
}

Conclusion:

We have successfully implemented the global state using Recoil. Although this was a small part, it is enough to use it in your projects. It is a developing project with many changes being present explicitly in syntax or under the hood. So I wouldn’t really suggest using it in big projects. One can always try new things and in my opinion, if you like Hooks then you would love using Recoil.

References:

Getting Started | Recoil