State management has always been a tricky part for someone learning a new framework.
And it gets tremendously difficult to manage a piece of a state which has to be shared by the components that are on completely different pages and/or having different parent components.
If you’ve used a global state management tool (something like redux), it does get intimidating at first and also has a substantial learning curve.
Here’s where recoil-js comes in.
Recoil-js is a fairly simple and easy-to-use state management library used for, you guessed it — managing state in a web app.
Let’s have a look …
1. Setting up Recoil-js
Step 1. create an empty react app using create-react-app
Step 2. Install recoil by running
npm install recoil
or
yarn add recoil
Step 3.
in App.js import RecoilRoot and wrap around the main component
Step 4.
Creating an atom.
An atom is a piece of state object which will be exported so that it can be used anywhere in the, yes anywhere! 🤯
2. Using Recoil-js
Step 1.
Importing an atom.
Here, I’ve used a functional component and imported our atom “textState”
and “useRecoilState” hook.
Yes, It looks very similar to useState hook and works in the exact same way.
Step 2.
In another component use the same hook used in the previous step and you can skip the setter part in the hook as we’re just using the value
Step 3.
Finally add these components in App.js
Here’s the output !!!
codesandbox link for the full code.
Conclusion:
There’s more to this in recoil-js, you can explore them in the docs. I’ll try to cover them in some future articles.
