29 Mar 2023

Understanding State Management

Author Picture

Written by Dimple Agola

Blog Thumbnail

Before getting into the state-management it is important to know that what is state.

What is state?

State is a term you might have heard a lot-especially when working with mobile or web application development. But how would you define state?

Say, if I’m drinking tea, my current state is that I’m drinking tea.

We could also narrow that down: I might be moving the tea mug to my mouth, so my state is that I’m holding the tea mug and that I’m lifting it up to my mouth. My state also is that my mouth is open.

So state is not just a thing.

As a person, you are constantly in a lot of different states — depending on how you look at it.

In programming, it’s basically the same! We can say that state is the behavior of an app at a given moment in time.

What is state management?

State Management is important whether you are building a mobile app or a web application. It refers to the management of the state of one or more UI controls. UI controls can be text fields, radio buttons, checkboxes, dropdowns, toggles, forms, and many more.

A website/web application consists of a number of such UI controls and the state of the one UI control depends on the state of other UI controls. Every framework has its own way to manage the state of these UI controls.

It centralizes all the states of various UI controls to handle data flow across the application.

State management can be done on both sides — frontend state management and backend state management.

Blog Image

Benefits of state management

  1. Whenever the user refreshes the browser URL, if data changes or new data is added, then a request will be sent to the server. Thus reducing the HTTP requests sent to the back end.
  2. Application is present at a single place so not need to access the single state.
  3. Server data can be easily updated/refreshed.
  4. State Management helps centralize code and simplifies code maintenance and improves the overall quality of code by reducing code size and making it more readable.

Now that you’re aware of its noteworthy benefits, there are a several ways of implementing State-Management in your applications. The next part of the blog will talk about these techniques.

List Of State Management Techniques for Mobile Application Development (Flutter):

  1. Scoped Model
  2. Provider
  3. SetState
  4. InheritedWidget & InheritedModel
  5. Redux
  6. Fish-Redux
  7. BloC/Rx
  8. GetIt
  9. MobX
  10. Getx
  11. RiverPod

State Management is ultimately a design pattern with the goal of properly sharing state data across components, and separating domain representation from state management. This pattern is applied by many popular web frameworks such as NGRX, Vuex, Redux or Flux.

To conclude, state management is especially important when you are dealing with large scale applications, where it plays a major role in optimizing performance and enhancing usability of the solution.