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??
Recoil is an experimental state management library at Facebook, created by Dave McCabe. To better understand Recoil, it is mandatory that you have comprehensive knowledge of React and React Hooks.
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?
Developers prefer to use the built-in state management capabilities of React.js over the external global state for the sake of simplicity and compatibility. But there are certain limitations of these built-in solutions, such as-
- 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
As Recoil is a state management library for React, you need to make sure that you get React installed and running before getting started. You can install Recoil.js directly from npm or yarn -
npm install recoil
//or
yarn add recoil
When installed via NPM, it works wonderfully with bundlers like Webpack.
Core Concepts of Recoil
There are only two core concepts of Recoil that you need to understand: Atoms and Selectors.
Atoms
Atoms are the pieces of state. They can be updated and subscribed. Whenever an atom is updated, all the subscribed components of it are re-rendered with a new value
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
A selector is a piece of derived state, where ‘derived state’ can be defined as the ‘the output of passing state to a pure function that modifies the given state in some way’.
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
Like everything else, Recoil has its own downsides. Truth be told, it is a great library but unless you have some specific problems, you don’t really need it. It's nothing that the developer’s world couldn’t survive without. The other libraries you’ve been working with lately are good enough.
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!