How to configure recoil.js for your react project?

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 (the global version of useState)
• You can manage your state very easily.
• It has very simple concepts like an atom and a selector.
• Very clean and simple working model.

Installation

• For npm package: npm install recoil
• For yarn package: yarn add recoil
• For bower package: bower install --save recoil

Implementing State

So basically, there are two concepts introduced in Recoil i.e., atom and a selector.

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.