React State Management with Recoil
Tags: react, recoil, webdev, javascript
Published: 2020-06-24 16:52:15

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 <RecoilRoot> to your Application

```javascript
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.

```javascript
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.

```javascript
//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.

```javascript
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.

```javascript
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](https://recoiljs.org/docs/introduction/getting-started)
- [Official Docs](https://recoiljs.org)