{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/recoiling-the-react/","result":{"data":{"markdownRemark":{"id":"efdddb7e-36bc-564c-b3e8-7f39a6811ca5","excerpt":"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…","html":"

Recoil js is another state management library for React.

\n

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

\n

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

\n

Why Recoil

\n\n

Recoil concepts

\n

There are two major concepts:

\n
    \n
  1. Atoms
    2. \n
  2. Selectors
    3. \n
\n

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

\n

Atoms

\n

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

\n

e.g.:

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

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

\n

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

\n

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

\n

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

\n

Now update your older code snippet.

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

to

\n
import { RecoilRoot } from "recoil";\n\nReactDOM.render( \n <RecoilRoot>\n    <AppPage />\n </RecoilRoot>, document.getElementById("root"))
\n

2. Set the Atom

\n

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

\n
import { atom } from "recoil";\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});
\n

Now this atom will be accessible throughout the app.

\n

3. use the atom

\n

Now update your older code snippet.

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

to

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

For a Larger view, here is Full Code

\n
import { atom,useRecoilState } from 'recoil'\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});\n\nexport const AgeCalculator = () => {\nconst [ageState, setAge] = useRecoilState(age);\n}
\n

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

\n

Selectors

\n

This is similar to how Redux manages states.

\n

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.

\n

1. set the selectors

\n

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.

\n
import {selector} from 'recoil'\n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});
\n

2. use the selectors

\n

Now will use the above-mentioned selector.

\n

below code snippet use age value to isChild.

\n
  const [ageState, setAge] = useRecoilState(age);\n\n  const value = useRecoilValue(isChild);
\n

For a larger view, here is Full Code

\n
import {selector, useRecoilState} from 'recoil' \n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});\n\nexport const AgeCalculator = () => {\n    const [ageState, setAge] = useRecoilState(age);\n   const value = useRecoilValue(isChild);\n}
\n

That's all, Milord.

\n

Conclusion

\n

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

\n

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.

\n","headings":[{"value":"Why Recoil","depth":2},{"value":"Recoil concepts","depth":2},{"value":"Atoms","depth":3},{"value":"1. Let's start with binding root app with Recoil","depth":4},{"value":"2. Set the Atom","depth":4},{"value":"3. use the atom","depth":4},{"value":"Selectors","depth":3},{"value":"1. set the selectors","depth":4},{"value":"2. use the selectors","depth":4},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/recoiling-the-react/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"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.","title":"What is recoil.js and how it is managing in react?","canonical":null,"date":"April 30, 2021","updated_date":null,"tags":["JavaScript","React","Recoil"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f37a15f3f8cda8461c5455bdd2895e0c/03979/react.png","srcSet":"/static/f37a15f3f8cda8461c5455bdd2895e0c/f5f11/react.png 200w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/6d133/react.png 400w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/03979/react.png 800w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/aca38/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","bio":"He is a fun-loving technocrat, artist, photographer, nature lover, leisure traveler, and developer. He actively develops full-stack apps and programs in Go and various JavaScript frameworks and libraries, especially React.","avatar":null}}}},"pageContext":{"id":"efdddb7e-36bc-564c-b3e8-7f39a6811ca5","fields__slug":"/engineering/recoiling-the-react/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}