React State Management Today
The Rise of Recoil — Facebook’s New State Management Library
The rapid rise of ReactJS was a result of its simplicity combined with its performance benefits. The rendering efficiencies from the virtual DOM, reusable components, and intuitive learning process brought many developers to choose React.
However, the lack of intuitive and effective solutions when it comes to React state management has been a recurring problem and this led to the rise of Facebook’s new state management library, Recoil.
First, let’s get a fundamental understanding of some of the issues with current methods of state management.
So What’s Wrong with State Management Libraries?
Libraries such as Redux came to popularity in order to address the issues associated with prop drilling and unnecessary re-renders across shared state throughout an application’s component tree.
Redux creates a centralized store and does an effective job in solving these core issues, however, this comes with its own problems:
- Steep learning curve: In order to effectively implement Redux, developers need to get familiarized with concepts and terms including selectors, reducers, actions, mapStateToProps, and much more.
- Restructuring business logic: Introducing Redux requires a centralized store and taking the business logic away from React components to actions and reducers, which contradicts React’s component based approach.
- Too much boilerplate: The file structure and flow complexity throughout a Redux app can be intimidating and difficult for React developers to learn.
- No Concurrent Mode support: React is soon releasing Concurrent Mode and Redux currently does not have support for this.
Learn more about issues with Redux here
Many of these problems associated with Redux and other state management libraries have led to a demand for a more intuitive method of state management that is both scalable and more React-ish.
Facebook then came out to address some of these issues with Context API.
Want to read this story later? Save it in Journal.
But What’s Wrong with the Context API?
Context API is a component structure provided by React to solve the problem of prop drilling. Context API allows us to make state global and share across components eliminating the need to prop drill.
However, Context API is only good for low-frequency updates, and has several other limitations and problems:
- Less Performant: The way context is set up leads to unnecessary and unpredictable re-renders. Every time the React Context Provider gets a new value, all the components that consume that value are re-rendered even when the component is just interacting with part of the state.
- Context Hell: Even though Context API has virtually no boilerplate in comparison to Redux, adding Context Providers makes for messy and unreadable code and this makes for a very frustrating workspace.
Learn more about Context API and its issues here
So What Comes Next?
The complications of Redux and the performance issues with Context API lead to the need for a solution that is far simpler with the benefits of state management libraries such as Redux. Facebook came up with the start of a solution in an experimental library, called Recoil — which addresses many of these issues.
What is Recoil?
Recoil is Facebook’s new experimental state management library that directly addresses the problems above, being able to write code in a React-ish way without having to sacrifice performance and scalability. With constant updates and dev tools similar to Redux, Recoil is in the early stages, but is certainly making a push. First, let’s understand some of the fundamentals and benefits Recoil.
Minimal Boilerplate
Getting started with recoil is as simple as wrapping the parent component in <RecoilRoot>. By doing so, you then have the ability to create as many independent global states as you would want.
Easy to Learn React-ish Approach
Recoil state management looks and feels just like using React Hooks. For example, the useRecoilState hook subscribes a component to the given state.
List of Recoil Hooks:
- useRecoilState()
- useRecoilValue()
- useSetRecoilState()
- useResetRecoilState()
- useRecoilCallback()
Learn more about Recoil Hooks here
Improved Performance
Being able to directly subscribe components to atoms and selectors leads to a large performance upgrade. You can imagine the atoms and selectors floating in a 3rd dimension above the component tree. This avoids re-renders between states that are not shared.
Dynamically Created State
Contrary to the Context API, Recoil allows you to create dynamic global state without sacrificing performance.
Concurrent Mode Support
Unlike other libraries, React is built using React state under the hood. Recoil is not usable outside of React, however, works incredibly well inside of React. It will be compatible with Concurrent Mode which is a powerful new set of features that will help optimize the responsiveness of React applications.
Learn more about Concurrent Mode here
Redux-like Dev Tools for Debugging (Recoilize)
The surging open source community has led to the development of dev tools similar to the Redux dev tool.
Check out the Recoilize dev tool here:
Conclusion
Recoil is a new experimental library and there are many unknowns. However, the open source community is promising and the typical issues developers have towards state management today are approached in a direct manner. This gives Recoil an auspicious start to a budding library that is sure to garner interest in the near future.
Check out this video to learn more about Recoil and get started!
More from Journal
There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us:
