Recoil: A New State Management Library Moving Beyond Redux and the Context API

A full introduction to Recoil, an experimental state management library for React applications

Recoil data-flow graph for state management — Photo by the author.

Available since May 2015, Redux is a predictable state container for JavaScript applications. It is a single source of truth, its state is read-only, and changes are made with pure functions. Redux has a nice browser debugging extension for easy debugging. The drawback is the complex boilerplate to start with. It may not be compatible with React’s upcoming concurrent mode.

Context API was introduced by React 16.3 in May 2018. Along with React Hooks (useContext), it provides a way to pass data through the React component tree without having to pass props down manually at every level. It is designed to share global data, such as the current authenticated user, theme, or preferred language. Context API and React Hooks provide a new approach to state management. Debugging is hard and there are performance issues when rendering multiple dynamic items.

So should you go with Redux or Context API?

After a couple of years of battle, with many articles announcing Redux is dead, not dead yet, etc., both are alive and adopted by many applications. There is no clear winner yet.

The following is an NPM trend comparison. Both of them are still in heavy use:

Now we have a newcomer.

Recoil is a brand new experimental JavaScript state management library developed by Facebook. It has been available since May 2020.

Problem Addressed

Recoil addresses many of the problems larger applications encounter when using the existing Context API:

• The component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render.