State Management Beyond Redux
At Homebase, we think a lot about client-side data. One problem we wonder about is the complexity of state management libraries. Redux was a huge step forward when it came on the scene. It forced us to think about how we mutate and subscribe to changes in our data along with giving us places to put that code. Over time, however, we realized we might have too many places to put that code…
Luckily for us, over the past few years programmers have created several new approaches to state management. In this post, we share our research on the trends in post-Redux state management and how we tried to incorporate the best parts of existing libraries into one solution. We hope you find a new library to play with and maybe even use in production.
Trends
We went through the most popular state management libraries and analyzed what developers wanted to see in their state management libraries. Below are some trends we got excited about:
Simple API
Ever since Redux, we and developers we’ve spoken to craved a simpler way to handle state. It makes sense that most state management alternatives we looked at prioritized simplicity. Zustand really shines here, seeming to prioritize a simple API above all else.
Declarative
Another way to make code simpler is to make it declarative. This is the main selling point of Cerebral. While we are huge fans of simplicity through declarative programming, we found Cerebral more complicated than we’d like.
Hooks
React hooks are another path to simplicity since they eliminate the amount of concepts you need to remember when writing React applications. With the advent of React Hooks, we saw libraries such as Zustand and Unstated start to use hooks for state management.
Server State
One of the developments we’re most excited about in the state management space is the acknowledgement of “server state”. Both Recoil and React Query try to make it easy to integrate client state with your server state using Asynchronous data queries. The trade-off ends up being added complexity.
Putting it all together
Looking at these trends we are more excited than ever about front-end development and decided to throw our hat in the ring with a state management library of our own. We wanted the simplicity of a library like Zustand with the power of a library like Recoil.
So, in a month we ended up creating a state management library around the local-first database we are working on and voila: very simple, imperative code, but with the functionality of a relational graph database right at your finger tips in the client.
As for “server state”, we are working on automatic syncing client and server data via a CRDT.
It’s already integrated into several applications, but we’d love to hear your thoughts on Homebase React.
Conclusion
We hope this was helpful! The chart below summarizes what we discussed and does a breakdown of what features each library has prioritized.
Notes:
- Redux does have middleware to try to incorporate server state.
- Redux and Unstated have unreleased React hooks.
