Recoil.js — A New State Management Library for React

Habilelabs
Jan 12 · 5 min read

By Payal Mittal

recoiljs- a new state management library for react
Recoil.js — A New State Management Library for React

State management becomes necessary to React when we need to share data among multiple components. Although React.js is self-sufficient, developers tend to use state management libraries for better data handling and there are a number of libraries for exactly this purpose.

So, what is it about Recoil.js that’s so appealing?

Well, the thing is that it feels just like React. The syntax is similar to React and it looks like a part of React API. Other than that, it has many other upsides like it solves the problem of global state management, shared state, derived data, etc.

In this blog, we will get to learn the basics about Recoil and how it is different from other state management solutions like Redux.

What is Recoil.js??

While there are many popular libraries like Redux and MobX that handle your state data and bid well with React applications. The problem arises when it comes to complex applications or when we might need something complex to deal with some issues, that’s where the conventional libraries do not come in handy.

Here comes in the picture- Recoil.js. While it solves our complex problems, its configuration is surprisingly simple, unlike Redux. And we do not need to write much boilerplate code.

Team Facebook created Recoil with additional concepts, like-

  • Shared State: Sharing the same state in different components in the React tree.
  • Derived Data: Computed data through changing states.

The addition of these topics is the real power of Recoil. Let’s check out the features of Recoil.js-

What’s Special About Recoil?

  • Context API can store only one value and not an indefinite set of values.
  • The component state cannot be shared unless being pushed up to the common ancestor, which might need a huge tree that needs to be re-rendered.
  • These both issues further make code-split the top of the tree difficult from the leaves.

Recoil solves all these problems with its Atoms and Selectors approach as-

“It defines a directed graph orthogonal to but also intrinsic and attached to your React tree. State changes flow from the roots of this graph (which we call atoms) through pure functions (which we call selectors) and into components.”

Recoil provides several capabilities that are difficult to achieve with React alone while being compatible with the newest features of React-

  • Boilerplate-free API
  • Compatibility with Concurrent Mode
  • Distributed and incremental state definition
  • State replacement with derived data without having to modify the components.
  • Derived data can move between being synchronous and asynchronous.

Now, let’s get started with Recoil.js-

Installation

npm install recoil//oryarn add recoil

When installed via NPM, it works wonderfully with bundlers like Webpack.

Core Concepts of Recoil

Atoms

You can create atoms by using the atom function, as given here-

const textState = atom({
key: 'textState', // unique ID (with respect to other atoms/selectors)
default: '', // default value (aka initial value)
});

Atoms use a unique key for debugging, persistence, and mapping of all atoms. Two atoms cannot have the same key, it will be an error so you need to assign globally unique keys for every atom created.

We use useRecoilState hook to read and write an atom from a component. Although it is similar to useState hook in React, you can also share the state between components.

Selectors

You can declare a new selector as given below-

const charCountState = selector({
key: 'charCountState', // unique ID (with respect to other atoms/selectors)
get: ({get}) => {
const text = get(textState);
return text.length;
},
});

Selectors also have a unique ID like atoms but not a default value. A selector takes atoms or other selectors as input and when these inputs are updated, the selector function gets re-evaluated.

It is used to calculate state-based derived data which lets us avoid any redundant states because a minimal set of states is stored in the atoms and others are computed as a function of that minimal state. This whole approach is very efficient because the selectors keep a record of components that need them and which state they depend upon.

When we see atoms and selectors in the light of components, they have the same interface and can be substituted for one another.

This was a quick go through into Recoil.js, you can check out the deep insights here-

Wrap Up

You can even use it partially in your application, exactly where you need, without having to adopt it for the entire application.

Just because the hype of something new released puts you on an edge, you don’t really have to try it, do you?? Decide yourself😉

Thanks for reading it till here!

Minds Verse

Insights for the enthused minds!

Minds Verse

We are an IT company, here to share inspirational stories, workspace ideas, tutorials, how-to’s, IT trends, coding tricks, tips from developers’ block, and what’s new in the software development corner.

Habilelabs

Written by

Habilelabs is an IT-service provider company, driven to bring forth sophisticated and promising software solutions throughout the world.

Minds Verse

We are an IT company, here to share inspirational stories, workspace ideas, tutorials, how-to’s, IT trends, coding tricks, tips from developers’ block, and what’s new in the software development corner.