React state management with React Recoil
State management is a consistent problem faced by most if not all React developers. Due to this, there have been several attempts at creating a clean and robust mechanism for state management of React applications. Redux is probably the most popular tool used in this regard and has accomplished its purpose quite well. Later down the line Context API was introduced along with React Hooks to manage application state. Both of these solutions have been adopted by modern developers. But during the recent React Europe 2020 event, the world was introduced to an experimental React state management system called Recoil. In this article, we will look at how Recoil works under the hood and gain an understanding as to why it may hold an edge over both Redux and Context API.
Why not Redux or Context API?
Redux has been a reliable solution for most developers and once the initial hurdle of setting up the boilerplate code is done it provides an efficient method of maintaining global state. However, even for maintaining global state for a simple application, it requires complicated setting up stores and verbose boilerplate code. Further, to add to Redux to an existing project the entire codebase will have to be restructured. Redux, in addition, does not support the new concurrent mode of React or contain built-in async support.
To those wanting a simpler way to manage global state, the Context API was an elegant solution. Context API allows us to have a provider and consumers that can access the global state accordingly. One limitation is when we have numerous items that need to render separately and maintain global state. A provider could be maintained for each item if the number of items is known. In the case of a dynamic list of items, a provider will have to be added to the component tree. This approach would cause the entire sub-tree to re-render causing inefficiency.
The Recoil Solution
“Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously”
The above explanation quoted directly from the Recoil documentation [1] explains the fundamental components of Recoil — atoms and selectors.
Atoms are bits of state that any component can subscribe to and changes to the atom’s state will cause all components subscribed to that atom to re-render. Atoms can be created at runtime as well.
Atoms require a unique key and use a special hook called ‘useRecoilState’ to read and write to the state (The functionality mirrors the ‘useState’ hook).
Atoms are structure orthogonal to the regular component tree and thus does not face sub-tree re-rendering issues similar to React Context and illustrated in the diagram presented by David McCabe during React Europe 2020 [2].
const todoListState = atom({ key: 'todoListState', default: [],});function TodoList() {<>
const todoList = useRecoilValue(todoListState);
return (
<TodoItemCreator />
{todoList.map((todoItem) => (
<TodoItem key={todoItem.id} item={todoItem} /> ))}</>);}
Selectors are functions that can accept atoms or other selectors and transform the atom’s state accordingly. As the passed in atoms get updated the selector is re-evaluated and components that subscribe to the selector will be re-rendered. The following is a simple example displaying how atoms and selectors can be used to create a list filter.
We have discussed the need for having a state management mechanism for React and looked at both Redux and React Context as the currently existing solutions. React Recoil has managed to address several concerns the community has had with both above state management solutions. We can look forward to a stable release of React Recoil soon and in the meantime, I urge you to also check out the below references for more information.