An Interest In:
Web News this Week
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
Recoil - Ideal React State Management Library?
In May 2020, Dave McCabe gave an interesting talk about the new state management library called Recoil. The video clicked immediately with me and inspired to write this article. Recoil is the missing puzzle piece for state management in React.
So why do we need another global state management library?
The reason we have so many different libraries of managing state in React, is that there is no oficial one yet.
Is Recoil an official one? No it is not.
@hyldemoer @acemarke @youyuxi Recoil is not an official state management library, and neither is Redux. The only official state management library for React is React itself. twitter.com/dan_abramov/st22:08 PM - 17 May 2020Dan Abramov @dan_abramov@achyut_theuiguy @reactjs @Facebook If you read the announcement as Recoil is a new library everyone you should use, you strongly misunderstood it. It works for some teams, and they open sourced it. Youre welcome to try it, but its not in any way an official recommendation. Its just another project.
But what is particularly different from the rest, is that Recoil is specifically designed for React and feels like React.
What's wrong with Redux?
Redux is by far the most popular library for managing state out there, but it does not come without drawbacks. Redux same as Recoil was designed for performant, predictable and debuggable updates of shared state. But let's take a look at what is not so great in Redux:
Ridiculous learning curve.
Some of you might not agree with the learning curve, but to me, after I got more or less comfortable with React, I really struggled to understand Redux. Like, how to structure the project? how to store the state? where should my business logic go? Redux documentation is overwhelming, and I am sure it has all the answers to these questions, but to really nail them down, it would take you quite a bit of time.Boilerplate reducers, actions, connectors.
Not many would disagree that Redux has too much boilerplate. If you are dealing with async data or caching computed selector values, you need to install third-party libraries solutions and add even more boilerplate. Additional code comes with the cost of having more bugs.Business logic is split from components.
I think a Redux way of splitting business logic from the components, is not going very well with the React component based approach. You are ending up with two different folder structures in one code base, folders with react components and folders with your global state, reducers, and actions. Adding another state requires you to touch many files.Code splitting is tricky.
I have never done code splitting with Redux, but because of this decoupling, it does not look like it is a straightforward task. code-splitting in Redux.No concurrent mode support.
React concurrent mode is very soon to be released. "Concurrent mode" is fixing fundamental limitation by making rendering interruptible. Not supporting "concurrent mode" will be a major drawback of the library.@rita_krutikova @acemarke There are some Concurrent Mode features that using Redux (or similar state management libraries that put state outside of React) will lock you out of. I dont know if it would matter in your case. But in general I suggest to stick with React state (and context) when you can.23:35 PM - 18 Jun 2019
What's wrong with Context API?
Context API is an utility coming from React core, specifically designed for solving the prop drilling problem. As opposed to Redux, it is good to be used for low-frequency updates, such as theme or locale. But because of Redux drawbacks, Context API often becomes overused.
There are some drawbacks once we start using Context as a state management tool
Unpredictable and not performant updates.
Because of how it was designed, context lets you store only one single value perProvider
. If you move your global store in the value of the Provider, you will be losing out on performance. When a React<Context.Provider>
gets a new value, all the components that consume that value are updated and have to render, even if a component only cares about part of the state.No way of creating context dynamically.
Imagine if you have a list of items that you dynamically add or remove, and each item has to have its own context provider for isolation or for performance reasons.
Introducing another item would require placing another Context Provider at the top of the tree, which would cause the whole tree to unmount and mount again.Context Hell
Context API definitely has much less boilerplate then redux, but if you start adding them more and more, your react tree would look something like this.No code split support
Because Context API introduces coupling between the roots of the tree and leaves of the tree, code splitting becomes nontrivial.
So What is Recoil?
Very easy to learn, simple API.
To get through basic API you would literally need 5 minutes. Here is a nice free egghead tutorial by Tomasz akomy.
But also please check the docs.Minimal boilerplate and reactish approach.
Recoil does have almost zero boilerplate, and it looks and feels very like just using simpleuseState
from React. You only need to wrap your app once in<RecoilRoot>
, and you can have as many independent global states as you like.Performant granular updates.
Recoil allows you to connect to the exact piece of state, which is a huge performance benefit. By creating an atom you add a new global state, by creating a selector you are adding a function that returns data derived from the given set of dependency values. Bothatom
andselector
can be subscribable and writable.Dynamically created state
Recoil allows you to create dynamic global states, by using atomFamily and selectorFamily. Both atomFamily and selectorFamily accept an id, which will dynamically create a state or a selector function.
const itemWithId = atomFamily({ key: 'item', default: ...}); useRecoilState(itemWithId(id))
No impact on code-splitting.
Unlike Redux or ContextAPI, Recoil state is not stored globally anywhere, the state definition is incremental and distributed, which makes code-splitting achievable out of the box.Concurrent mode support.
As opposed to other state management libraries, Recoil is built on React primitives, it is using react state under the hood. For this reason, Recoil is not usable outside of React, but it works very well within React and comes with concurrent mode support.
Conclusion
Of course, Recoil is not ideal and there are still many unknowns. But what I like most about it, is that using Recoil feels so much familiar than existing state management libraries out there.
Currently, the library is in a very early stage, but I am sure it has enough to get you excited. Official Get Started
Thanks for reading my thoughts on Recoil. This is my first article and I would be interested to hear your feedback.
Original Link: https://dev.to/alexandrzavalii/recoil-ideal-react-state-management-library-1203
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To