DEV Community

Cover image for Recoil - State Management for React & React-Native (2022)
Santhosh Umapathi
Santhosh Umapathi

Posted on • Updated on

Recoil - State Management for React & React-Native (2022)

Short Introduction:

What's Recoil? Recoil is a State Management Library for React & React-Native applications created by the team of Facebook, which can be used as an alternative for Redux or Context API, or any other state management libraries. Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of the state that components can subscribe to. Selectors transform this state either synchronously or asynchronously.

Why Recoil?

Recoil is easy to set up compared to a lot of Boilerplate code to set up Redux or other state management libraries.

Without further ado, let's dive into the action!

Installation:

Set up your base project from React or React-Native with the help of official docs of Reactjs or React-Native.

Then install the Recoil in your project with the below commands for NPM or Yarn.

Npm:

npm install recoil

Yarn:

yarn add recoil

Usage:

Navigate to the root file of your project, in our example, its App.Js. Import the RecoilRoot and wrap it around your component at the root level.

App.js:

import {RecoilRoot} from 'recoil';

function App() {
return (
<RecoilRoot>
{/*Rest of your application*/}
</RecoilRoot>
);

Create a new folder under the src folder, you can name it 'store' or anything you like, in our example, we will call it 'recoil'. Under the 'recoil' folder, create two subfolders called - 'atoms', and 'hooks' and create an 'index.js' file for each folder like below.

Folder structure

recoil/atoms/index.js:

This is where you create your initial state with default values, each atom is a state (similar to useState). When the state of this atom changes, only the components subscribed to this atom will rerender, so there won't be unnecessary re-renders. You can create as many atoms as needed.

import {atom} from 'recoil';

export const count = atom({
key: 'count',
default: 0,
});

recoil/hooks/index.js:

This is where you create your actions to manipulate your state (similar to setState in useState). You can create all your business logic here and even the network requests to update your states. We import the atoms from the initial state and create an action to update the state. Export both as State and Actions.

import {useRecoilState} from 'recoil';
//Atoms
import * as atoms from '../atoms';

export const useAtoms = () => {
const [count, updateCount] = useRecoilState(atoms.count);

const setCount = payload => updateCount(payload);

//Atoms State
const state = { count };

//Atoms Actions
const actions = { setCount };

return {state, actions};
};

src/screens/HomeScreen.js:

Finally, to use our newly created state and action, we would import the hook into the component, in our example 'HomeScreen.js', and destructure our hook into 'state' and 'actions'. Access the state directly into the component and use the action handler to update the state.

//State
import {useAtoms} from '../../recoil/hooks';

const HomeScreen = (props) => {
const {state, actions} = useAtoms();


return (
<div>

<span>{state.count}</span>

<button onClick={()=>actions.setCount(state.count+1)}>INCREMENT</button>

</div>
)
}

export default HomeScreen;

That's it. You can also create multiple hooks to separate the logic as per your needs.

Conclusion:

As you can see, it was so easy to set up global state management for our entire application. With the help of hooks, we get the type IntelliSense of our state and its expected types as well. Recoil has a lot of other benefits as well. Do check out their docs at Recoil.org.


Thank you for reading all the way through.

Hope this post was useful to improve your Developer Journey !!

Originally published on: https://blogs.appymango.com/blogs/62724084e93892f586ac6d21

Discussion (0)