Recoil vs Redux | The Ultimate React State Management Face-Off
Tags: react, recoiljs, redux, statemanagement
Published: 2020-06-07 04:11:59

---
title: Recoil vs Redux | The Ultimate React State Management Face-Off
published: true
date: 2020-06-06 05:37:27 UTC
tags: react,recoiljs,redux,statemanagement
canonical_url: https://medium.com/@chandan.reddy/react-recoil-vs-redux-the-ultimate-react-state-management-face-off-188a729a70ee
---

![Cover picture of redux vs recoil state management libraries](https://cdn-images-1.medium.com/max/1024/1*sbwga5yfuX3O3CB2I-D-QA.jpeg)<figcaption>Redux vs Recoil</figcaption>

React with its component-based approach has made the life of developers easy by managing separate state and logic for each component and the ability to re-use them when required. But what if you wanted to use a shared state between multiple components or maybe fetch data from an API once and make it available to all the components in your app? That’s when global state management libraries like Redux, MobX, etc., come into play.

#### The downfall of Redux:

With the release of React 16.3, the react community got to experience the new Context API which worked similar to Redux and allowed to manage state in multiple components using Context Object, Provider, and Consumer. However, the context API also came with a catch! Sebastian Markbage from the React team has mentioned that the new Context API was not built and optimized for high-frequency updates but rather for low-frequency updates like theme and user auth management inside your app. You can check out his comment [here](https://github.com/facebook/react/issues/14110#issuecomment-448074060). Context API also had some limitations with code splitting and the ability to store indefinite values instead of a single value.

#### So, what’s next?

Facebook recently launched [Recoil](https://github.com/facebookexperimental/Recoil), which is a brand new experimental JavaScript state management library that addresses many of the problems larger applications face when using the existing Context API.

![Image of React Recoil fan-made logo chandan.dev (Unofficial)](https://cdn-images-1.medium.com/max/784/1*kmm4E29iST5X569ItIEaKQ.png)<figcaption>Recoil (Fan made logo — Chandan.dev)</figcaption>

#### The Basics of Recoil:

Recoil mainly comprises of two things —  **Atoms** and **Selectors**.

#### Atoms:

Atoms are units of state. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

> In simpler terms, Atoms are units of state that components can subscribe to.

#### Selectors:

A **selector** is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change. Selectors can also be used to calculate derived data that is based on state.

> In simpler terms, Selectors transform the atom state either synchronously or asynchronously.

You should probably check out this video from the recent React Europe live stream to get a better understanding of recoil.

{% youtube _ISAA_Jt9kI %}

#### The face-off: Recoil vs Redux

Let’s start by creating a demo application with _create-react-app_ which increments the count on the click of a button.

![Demo application for recoil vs redux](https://cdn-images-1.medium.com/max/1024/1*7n97roaECxGeb1rx35eKaw.png)<figcaption>Demo app for recoil vs redux</figcaption>

Our application is going to consist of _MainComponent.js_ which receives the _count_ and _handleFireClick_ function as props.

![react recoil vs redux — main component](https://cdn-images-1.medium.com/max/1024/1*4eXA_Hrg2OxaENEzQDlQdg.png)

#### Configuring the store:

In redux, we start off by creating a basic store that acts like a global state for our application.

![react recoil vs redux — creating the store](https://cdn-images-1.medium.com/max/1008/1*-zM6masUEzo1AAEBb6md8g.png)

In recoil, there is no need to create a separate store. Wow! that’s awesome 🤩.

#### Creating a shared state:

In redux, we create the desired application state using reducers. Let’s create a simple _counterReducer_ which increments the count by 1.

![react recoil vs redux — creating the reducer](https://cdn-images-1.medium.com/max/1024/1*J6Udf_p22tt3Na97RafTlA.png)

In recoil, creating a shared state is a straight forward approach using atoms. Each atom can be considered as a single shared piece of state. Now, let’s create an atom for holding our counter state.

![react recoil vs redux — creating the atoms](https://cdn-images-1.medium.com/max/874/1*9HtEcB62dIHwFNivF7ks7A.png)

#### Firing the actions:

In redux, actions are fired using the dispatch method provided by redux. Let’s create a file named _actions.js_ which holds the action for incrementing the count.

![react recoil vs redux — creating the actions](https://cdn-images-1.medium.com/max/1024/1*yg3MpuBZIKbAh0oaSHJkiA.png)

In recoil, we fire off actions and modify the existing shared atom state using selectors.

![react recoil vs redux — creating the selectors](https://cdn-images-1.medium.com/max/1024/1*S4Y0zo5JIS313bLxN8uFtg.png)

#### Connect ’em all:

Finally, it’s time to connect the shared state with our _MainComponent.js_ component and to differentiate Redux from Recoil, I’ll be creating two new wrapper components called _ReduxExample.js_ and _RecoilExample.js_.

In _ReduxExample.js,_ we use **_useSelector_** and **_useDispatch_** hooks provided by react-redux to get value from store and fire actions to update it.

![Redux with react hooks](https://cdn-images-1.medium.com/max/1024/1*Z8Xagyge8yKx8n9DuAWe7g.png)

**Bonus** : In _ReduxExample.js_ we can also create a class component and wrap the component using connect HOC by redux and pass the shared state, actions as props using **_mapStateToProps_** , and **_mapDispatchToProps_** respectively.

![react recoil vs redux — redux example component](https://cdn-images-1.medium.com/max/1024/1*-bbDA8SekO-vfPQMGT5Khw.png)

In _RecoilExample.js_ we can directly use the shared atom state value with **_useRecoilValue_** and update our state, as simple as doing a setState but with **_useRecoilState_**.

![react recoil vs redux — recoil example](https://cdn-images-1.medium.com/max/1024/1*bePw3Xd3tceo4tAu0V5oqg.png)

> **Note** : Recoil is based on react hooks and will only work for functional components.

#### Final Wrap:

There is just one more step for your app to start working and that’s by wrapping your Example components with HOC components provided by Redux and Recoil.

For the Redux example, we use the Provider from react-redux and pass our _ReduxExample.js_ component as children. Make sure to also supply the store you created in the first step.

![react recoil vs redux — redux app](https://cdn-images-1.medium.com/max/1024/1*8KVjC0eTqT4SfHWXT6H9MA.png)

Similarly, for Recoil, we wrap the _RecoilExample.js_ component using the RecoilRoot component provided by recoil.

![react recoil vs redux — recoil app](https://cdn-images-1.medium.com/max/1024/1*pEPgkJO7zbjEonbiL9U0Rg.png)

#### Let’s Go!

At this point, we have successfully created the shared state and actions to update it using both redux and recoil. Simply run npm run start and check if your code is working.

![react recoil vs redux — final working of the demo app](https://cdn-images-1.medium.com/max/600/1*eOlBZS9tJ3RzBVn3YK_krw.gif)

#### The main question — Will Recoil replace Redux?

That’s a tough one to answer today (at the time of writing this post) as it is still in the experimental phase but the new library looks promising and there is a high probability that developers will switch to Recoil from Redux shortly.

Why? Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components without having to deal with store creations and re-render the entire App component tree while the state updates.

#### Conclusion:

So, this was a quick comparison between recoil and redux for a simple increment counter app. You can check the live version of the app [**here (Redux-vs-Recoil)**](https://recoil-vs-redux.chandan.dev/) and source code on [**Github**](https://github.com/chandan-reddy-k/recoil-vs-redux). It’s just a matter of time Recoil becomes the new standard for managing shared states in your react app and is ready to be used in production applications. Until then give it a shot and follow the community to keep yourself updated with the new releases. If you found this post helpful in understanding the basics of redux-vs-recoil give a 👏 and leave a comment on — What features would you love to see in Recoil? I’d love to hear any thoughts on this topic 😋.