Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

logoAsync

The latest news in the world of engineering.

Identity and Access Management (IAM), including security and customer experience.

Visit Blog
Fuel

Grow your business to millions.Engage and retain your customers.

Visit Blog

What is recoil.js and how it is managing in react?

Recoil is an experimental state management library and It provides several capabilities that are difficult to achieve with React alone.In this article we learn about the recoil.js, and how it is managing state in react.

Abhimanyu Singh Rathore
Abhimanyu Singh Rathore
April 30, 2021
2 min read

Free, Secure and Trusted Way to Authenticate Your Visitors

Add login to your website in 5 minutes completely for free!

Free Sign UpNo hidden costs. No credit card needed.

Recoil js is another state management library for React.

Though we already have Redux. Mobx, Context, but here we got a new light entry in the community.

Why I am saying light you will figure it out at the end of this blog.

Why Recoil

  • Firstly, it solves the global state management problems.
  • Easy to learn; there are no new major principles n logic to learn.
  • Quite Simple, it is similar like react.
  • Though I like redux, but it will not take that much time to learn.

Recoil concepts

There are two major concepts:

  1. Atoms
  2. Selectors

Something new? Don't worry will understand this quickly.

Atoms

This is similar to how we use the useState hook in react. If you are new to react hooks, checkout react hooks guide.

e.g.:

 const [age, setAge] = useState(0);

age : this will be used for state variable declaration. setAge :this will be used for state variable updations.

1. Let's start with binding root app with Recoil

Now you need to make a few alterations in your app's root level, like the below snippet.

RecoilRoot will behave like a global context provider that will share the global state to your app tree.

Now update your older code snippet.

ReactDOM.render( <AppPage />, document.getElementById("root"))

to

import { RecoilRoot } from "recoil";

ReactDOM.render( 
 <RecoilRoot>
    <AppPage />
 </RecoilRoot>, document.getElementById("root"))

2. Set the Atom

Recoil calls this part as atom, where we set the global key, value.

import { atom } from "recoil";

const age = atom({
  key: "age", 
  default: 0  // default global value for age key
});

Now this atom will be accessible throughout the app.

3. use the atom

Now update your older code snippet.

 const [age, setAge] = useState(0);

to

import { useRecoilState } from 'recoil'
const [ageState, setAge] = useRecoilState(age);

For a Larger view, here is Full Code

import { atom,useRecoilState } from 'recoil'

const age = atom({
  key: "age", 
  default: 0  // default global value for age key
});

export const AgeCalculator = () => {
const [ageState, setAge] = useRecoilState(age);
}

Quite easy. Isn't it? Now let's move to another part selectors.

Selectors

This is similar to how Redux manages states.

if a value can be derived/computed from the state, then we can skip re initialize of an another separate state key, for that use selectors.

1. set the selectors

In the below example, we are getting isChild value from age key, then we can directly use selector instead of adding a new key or atom.

import {selector} from 'recoil'

const isChild = selector({
  key: "childage",
  get: ({ get }) => {
    const state = get(age);
    return state < 10 ;
  }
});

2. use the selectors

Now will use the above-mentioned selector.

below code snippet use age value to isChild.

  const [ageState, setAge] = useRecoilState(age);

  const value = useRecoilValue(isChild);

For a larger view, here is Full Code

import {selector, useRecoilState} from 'recoil' 

const isChild = selector({
  key: "childage",
  get: ({ get }) => {
    const state = get(age);
    return state < 10 ;
  }
});

export const AgeCalculator = () => {
    const [ageState, setAge] = useRecoilState(age);
   const value = useRecoilValue(isChild);
}

That's all, Milord.

Conclusion

I hope you got why I am saying this as light.

Recoil is looking relatively easy, promising, and early-stage, but again this is the next generation, and it will take time to get the own space in the community.



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptReactNodeJsAuthenticationCSSSecurityC#OAuthGo

Do you want a free authentication solution?

Add the world's most secure, reliable and easy to implement user authentication solution on your applications at $0Get Started Free

Abhimanyu Singh Rathore

Abhimanyu Singh Rathore

A Fun loving, Technocrat, Artist, Photographer, Nature Lover, Bold, Leisure traveller, Sightseer, Developer, A Surprise Package to Explore!

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces