The Three Responsibilities of a Client-Side State Management Solution
Historically, when starting on a new React project, we’ve had to design and implement the state management infrastructure from scratch in a bare-bones way.
No matter which approach we take, in every client-side application, the generic role of a state management solution is the same: to handle storage, update state, and enable Reactivity.
Most apps need to hold onto some data. That data may contain a little slice of local state that we’ve configured client-side, or it could be a subset of remote state from our backend services.
Often, we need to combine these two pieces of data, local and remote, and then call upon them in our app at the same time. This task alone has the potential to get pretty complicated, especially when we need to perform updates to the state of our app.
The Command-Query Segregation Principle states that there are two generic types of operations we can perform:
In GraphQL, we refer to these as
In REST, we have several
command-like operations like
post, etc and one
query-like operation called
Most of the time, after invoking an operation in a client-side web app, we need to update the state stored locally as a side-effect.
When storage changes, we need an effective way to notify pieces of our UI that relied on that particular part of the store, and that they should present the new data.
Just about every library available out there right now can adequately handle all three of these responsibilities! Here are some of the most popular approaches right now in the React realm.
- Storage: Plain JS object
- Updating state: actions + reducers
- Reactivity: Connect
React Context + Hooks
- Storage: Plain JS object
- Updating state: useReducer (or not)
- Reactivity: useContext
- Storage: Normalized cache
- Updating state: Cache APIs
- Reactivity: (Auto) Broadcast change notifications to Queries
Liked this? Sing it loud and proud 👨🎤.
Stay in touch!
Enjoying so far? Join 15000+ Software Essentialists getting my posts delivered straight to your inbox each week. I won't spam ya. 🖖
View more in Software Design
You may also enjoy...
A few more related articles
Software Design and Architecture is pretty much its own field of study within the realm of computing, like DevOps or UX Design. Here's a map describing the breadth of software design and architecture, from clean code to microkernels.
Learn how to use DDD and object-oriented programming concepts to model complex Node.js backends.
Want to be notified when new content comes out?
Join 15000+ other Software Essentialists learning how to master The Essentials of software design and architecture.