React State Management with Recoil

Recently in May 2020, A open Source project by the Facebook experimental community, Recoil's development was started. Now the project is set-up and is mostly ready to use.

NOTE: Beware, the project is still in development So I wouldn't suggest to use it directly in production projects.

What is recoil?

Recoil is a state management library developed by Facebook Experimental. But don't think of it as just another library.

As we all know recently Reacts Hooks came into play, and I love using React hooks. they make everything so much simple and the best part is not going over the fuss of classes and this.

If you also love using Hooks then Recoil is perfect for you.

What's Different?

If you are familiar with the other state management libraries then you must be familiar with the fact that all the state management libraries till now are only focused on the state. Every one of them like redux and context API is basically about handling the state the old way. Although they have implemented the hooks in them it still doesn't feel like using the native react hooks.
So, now let's see what recoil does differently :

• It feels just like React (just like a global version of useState)
• Easy State Management
• Simple concepts like atom and selectors

---

Get Started | Implementing State

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

but before that, you need to add to your Application

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

const App = () => {
  return (
    <RecoilRoot>
      <TextInput/>
      <CharacterCount/>
      //Other Components
    </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 which are associated with this atom will automatically be re-rendered once atom is updated.

const someState = atom({
  key: 'textState', // have to be 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.

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

---

Getting Started | Using State

There are two ways to get the declared state into our components. i.e By useRecoilState or 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 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>
    );
}

---

Conclusion

We have successfully implemented the global state using Recoil. Although this was a small part but it is enough to use it in your projects. As we all know its a developing project so many changes whether they be explicit in syntax or under the hood. So I wouldn't really suggest to use it in big projects one can always try new things and in my opinion if you like Hooks then you would love using Recoil.

Refrences

• Getting Stated with Recoil
• Official Docs