Frontend State Management

What is State and Why we need it?

Photo by Daniel Leone on Unsplash

This is a two-part series, In the first part, I am going to write about why we are speaking a lot about State and why we need it in our application. In the second part, I would write a sample to-do application using React and apply different state containers to evaluate against different architectural concerns like Scalability, Manageability, Performance, and Productivity.

Let's start swiftly…..

Photo by Austin Distel on Unsplash

I am sitting in my office after finishing one of the major application, my state of mind is relaxed and COOL.

Well, am I supposed to write about my state of mind, which is in a COOL state or do I need to focus on Application State in the web ecosystem? Well, if you take a birds-eye view, both Mental state and Application state looks to be representing some or other form of information.

My mind state is relaxed, cool and happy, where is an application state could be about User, UI interactions, Navigation, Communication happening with a server and so on. So lets quickly understand what State is in frontend applications.

What is “State”?

A state is a representation of a system in a given time. State refers to the data stored in Application in the form of a string, arrays, object, etc.

We can classify state in multiple ways. Let me take a moment to give you my mental modal of looking at state.

1. Application domain: Entity in our application. [user, role, permissions, etc are called entities in the user management system]
2. View/Component state: Do we need to filter these entities based on the gender of a user?
3. Network state: Is the user logged in?
4. Communication: Are we in the process of fetching the entities from the server?
5. Navigation state: Where are we in the application? Which entities are we looking at?

What is “State management” and why we need it?

State management is a method of managing the state. As an application grows, so does the complexity of managing the state. In a big application where you have a good number of views/components, managing their state is a big pain. The main job of any UI Library or framework is to take your application state and turn it into DOM nodes, that's why arranging state in a better way lifts the overall health of the application.

Let me share an example here to make it more clear, open your choice of editor and write some code into it, consider this as first state of code, now push it using some version control system in a repository for better code management, another day you make some changes into the code or added new code, now you have a new state of your code which you again push into repository. Over a period, your repo has different check-ins representing different states of your code.

git code-versioning flow

Similarly, when you run your application user interacts with it, it does some changes on the UI controls, fetches data from the server, runs animation, opens a side panel, etc. So, every time when the user is interacting or doing some changes, changing the state of an application. Managing all these changes/ state requires some management, that’s where State management comes to rescue you, it helps you manage your different state which keeps changing over time, it helps you scale your application with better control over it.