Skip to content
Efe Behar

💻 Understanding state management in front-end applications

JavaScript, State Management3 min read

With constantly growing web technologies, web applications also grows. This growth gives opportunities to build more interactable web applications that loved by the end-users. When saying interaction in applications, we always need some kind of state management solution. In this post we will talk about the state and state management in front-end applications.

State & State management

Starting with very basic things, we need to define what is state? State is a remembered information by the computer. Information that changes over time. This is a very basic definition of state. In computers we store information in variables and contents of these variables represents our program's state while the program is running.

State is a remembered information by the computer.

Information that may change over time and used by our program while the program is running.

State management, therefore, describes a way the application handles changing states in response to some action. Such as clicking on a button, loading the page, changing the color mode from light to dark.

Let's represent the management of a simple state with an example. Assume that we have a toggle button that handles the theme of the application. Our state values would be light and dark with an initial state value of light. We would determine the initial state based on the user's system default, but to keep things simple we will have light by default. We told that state is changing information over time. To change state's value we need some action. In case of our example, the action would be toggle, which is fired when the user wants to change theme color. We can visualise this like below.

We have light as an initial state, then we fire toggle action which transition state from light to dark. When we toggle again, we transition state from dark to light. So, we can say that state management has three important parts, initial state, set of finite states and actions that cause state to change.

State management, describes a way the application handles changing states in response to some action.

State management has two important parts, initial state, set of states and actions.

As we add more states and actions, state management may get more complicated. To understand this better, let's pick a more complex example. Look at the multi-step form state visualisation below.

In the first step we ask user to download and setup some auth application to generate one-time password codes. When user is ready, we ask for taking user to the next step. In the next step we want a otp code from the user to verify if auth application setup was successful. When user confirms it, we suggest saving some recovery codes, to allow user for recovering 2FA in case of some problems. As a last step we ask for finalising the process. Now we reach to final state of our multi-step 2FA form. As you can see this form has more complicated state structure comparing to simple toggle button in the previous example.

Both examples applies to web applications, but these are only for managing the UI state. In web applications we also have other type of states to deal with. States aren't used only for keeping UI interactions or behaviours. For example we can fetch data from the server and manage it in the web application to show to user.

Assume that we have an endpoint that returns a list of products and we need to keep this data in application’s state. We can basically represent this in the code below.

1let products = [] // -> initial state
3// Pre-fetch products
4products = await getProducts() // -> next state
6// Re-fetch products
7products = await getProducts() // -> new next state

Here, we keep a list of products as an array. We assign empty array as an initial state. When we load the page, we fetch all products first time and update the products array. Later in a response to some action, for example, refreshing products list or filtering, we refetch products and update. So we got the next state. Now let’s look at state visualisation of this case.

Starting point is empty_products_list. After that we have one action that fetches data from the server and updates the state with products list returned from the server. Also we have another action actually which is equal to fetch_products action, where we fetch products again and update the products state. As you can see state for data fetching is as much easy as switch button state. Handling a state of a multi-step form is much harder than this.

Based on the assumptions of the above examples we can say that, even these simple examples can reveal that states have an important place in our applications and there can be more than one state type to handle in web applications. For example state that responsible for keeping UI behaviours, or state that handles server data on the client-side. Before implementing any state management solution, first we should understand with what kind of states we will deal. Because, the way storing and managing them may not be the same.