[Tech Blog] Recoil State Management for React

Hi! I’m Chun Wei, front-end developer for the AnyTag team. In this article, I would like to introduce you about Recoil, a state management library for React.

What is state management

State management is simply a way to engender communication and sharing of data across application. It creates a concreate data structure to represent your application state that you can read and write. In the simplest definition, state are the memory of the application. Since React 16.8, every React component, whether class or functional can have a state.

Why Recoil

There are so many state management library that can be used with React project, it can be quite challenge to decide which state management libaray to use for your project. Obviously Redux is one of the most popular React state management library as of the time. However it required a lot of boilerplate even in small application that don’t require a lot of global state management. On the other hand, React Context hook bring more simple configuration compare to Redux, but any change to the value prop causes the consumes Context component and it children to re-render.

In this case, Recoil play a good roles which simple configuration, it does not need to prop drill or set up context providers. Only the component that use the atom will be updated and optimizing renders to make your application fast.

What make Recoil special

Developers used to manage data with built in state management capabilities of React, but there are certain limitations of built in solutions such as:

1. Context hook can store only one value and not an indetermine set of values.
2. The component state cannot be shared unless being pushed up to the common ancestor which might cause all the relevant subcomponents to re-render.
3. Both of these make it difficult to code split the top of the tree from the leaves of the tree.

Recoil solves the limitation with its Atoms and Selectors. This approach come with:

1. Boilerplate free API, very easy to learn. Shared state has the same interface concept with React local state.
2. Support concurrent mode. Compatibility with concurrent mode and other new React features.
3. Code splitting. Distributed and incremental state definition which making code splitting possible.
4. Easy state replacement. State can be replaced with derived data without having to modify the components.
5. Async Support. Derived data can be synchronous or asynchronous wihout having modify the components.

Installation

Recoil is a state management library for React. Before get started, you need to install React. To install recoil, we can use the follow command:

If you using npm:

Or if you’re using yarn:

RecoilRoot

Components that use Recoil state need to wrap inside RecoilRoot. To appear somewhere in the parent tree, place it in root component as shown below:

Atoms

Atoms represent a pieces of state. It can be updated and subcribed from any component. Updated of atom will allow all the subscribed components to re-render with a new value. You can create atoms by using the atom functions as shown below:

Components that need to read and write to an atom, need to use useRecoilState() hook as shown below:

Selector

Selector represent a piece of derived state which can be defined as the output of passing state to a pure function that modifies the given state in some way. You can declare a selector as shown below:

To read the value of charCountState, we need to use useRecoilValue hook as shown below:

Conclusion

There is nothing wrong to choose with any type of state management library. Like everything else, Recoil is not ideal and has it own drawback. But what I like about Recoil is it easy to understand and simple configuration. It is true that Recoil is one of the great library that help you creating React application with more simpler and even more fun.