Recoil State Management

What is Recoil?

Recoil is a state management library developed by Facebook. It provides a simple and efficient way to manage and share state across in different components in your application. It is much more user friendly.

Why Recoil?

Recoil has unique advantages compared to other state management libraries.

• Fewer boilerplates.
• Simple to learn and understand
• The data flow is very simple.
• Atom based architecture.
• Easy integration.
• Asynchronous data is queried using pure functions. 

How to Install Recoil

Let's start by installing the library. If you are working on your local computer, you can install Recoil using npm or yarn.

npm i recoil

// or

yarn add recoil

Recoil has 2 key concepts.

• Atoms
• Selectors

Recoil Architecture

        

Atoms :- An atoms are units of state. They are updatable and subscribable. When an atom is updated, each subscribed component is re-rendered with the new value.

This is how we can create an atom using Recoil:

const loadingState = atom({

key: 'loadingState',

default: false

});

To create an atom we need to provide a Key, which should be a unique value.

This key is used for persistence, debugging, etc. Also we need to provide the default value of our atom, it can be anything such as arrays, objects, strings function, etc.

To read and write an atom from a component, we use a hook. called useRecoilState(). It's just like useState(), but now the state can be shared between components.

import { atom } from 'recoil';

const loadingState = atom({

key: 'loadingState',

default: false

});

const App = () => {

const [loading, setLoading] = useRecoilState(loadingState);

...

}

Selectors :- A selector is a pure function that can receive an atom or a selector as an input. Given an input, the selector returns a modified state every time the upstream atoms or selectors are updated. Selectors can also be subscribes to , and again, when the selector changes, every component that's subscribed to that specific selector will be re-rendered.

To create a selector, we need to provide a key, which needs to be a unique value and a get function, This get function returns a modified piece of an atom.

const checkLoadingState = selector({

key: 'loadingState',

get: ({ get } ) => {

const loading = get(loadingState)

return `Loading is ${loading ? "true" : "false}`

});

Selectors can be read using useRecoilValue() , which takes an atom or selector as an argument and returns the corresponding value.

import { atom } from 'recoil';

const loadingState = atom({

key: 'loadingState',

default: false

});

const App = () => {

const loading = useRecoilValue(loadingState);

...

}

Pros and Cons of Recoil

Pros

1) Easy to use: Recoil has a simple and intuitive API that is easy to understand and use. It allows developers to manage complex states without having to write a lot of boilerplate code.

2) Highly flexible: Recoil is highly flexible and can be used with any React project, regardless of its size or complexity.

3) Performance: Recoil is designed to be performant and efficient. It uses a unique approach to managing state that minimizes re-renders and improves application performance.

4) Type-safe: Recoil provides a type-safe way to manage state that ensures that the application code is free of errors.

Cons

1) Learning curve: While Recoil has a simple API, it may still take some time for developers to learn and understand its concepts and how it works.

2) Limited support: Recoil is a relatively new library, and there may be limited support and documentation available.

3) Integration with Redux: If your project already uses Redux, integrating Recoil can be challenging and may require some code refactoring.