JetPack Compose  — State Management

JetPack Compose  — State Management

IJetPack Compose 🏹 — State Management

It refers to manage the state of the user interface while interacting with widgets like text fields, buttons, radio buttons, etc.

Jetpack compose official

State Management in Android is a complex concept and to know the reason you have to first understand the architectural design of Android and to learn why it’s the key requirement to manage state. The Marcelo Benites article Managing State in Android defines the best description of the state:

The state is an object that is connected/subscribed to one or more widgets, contains data, and eager to update the widgets from that data. If there’s any change happens in data, it notifies all widgets to whom it’s connected. The values of the state are changed at runtime.

In jetpack compose the concept of state management is the same as Observable pattern which stated that if there is any change that occurs in the subscribed object, it triggers all of its dependent objects automatically.

In addition to the above concept, jetpack compose has some functional change, which states that the subscribed @ composable function(s) recomposes itself with the new data when the state/object value is updated and doesn’t affect or update the whole UI.

According to the state management document, jetpack composes support state using two ways:

  • remember { mutableStateOf(…) }
  • MutableStateOf
Current working environment

In the past, we used @Model annotation but it was deprecated in0.1.0-dev12. Then state{} annotation deprecated in 0.1.0-dev16.

Let’s discuss it in detail:

remember { mutableStateOf(…) }

It’s an extended version of State

state approach

This approach is the same as what we did in state the only change we see is the calling. Let see what composable team said about it:

Mark the state composable as deprecated and promote the direct usage of remember { mutableStateOf(…) } instead for better clarity and understanding of the Compose state management API surface. This reduces the overall API surface and the number of concepts for state management and matches the `by mutableStateOf()` pattern for class property delegation.

In this concept, the object is initialized in the same scope where the mutation is implementing. The best possible initialization is inside the @compose function. It also follows the same Kotlin object hierarchical pattern like to pass as a reference to another function. Now, you have a scenario in which you want to mutate the object that’s initialized outside of the scope, then the next approach mutableStateOf is useful.

How to use remember { mutableStateOf(…) } approach

MutableStateOf

mutableStateOf and property delegates

mutableStateOf approach

mutableStateOf API allows us to create MutableState instances outside of class. In this approach, each property is observed individually, so the recompositions you see after this refactor could be more narrow. 🤔

In simple words, it says that read and write operation on each property is watched by compose and if there’s any property change, the composable triggers all of the composed indexes where this property is observed. It also gives us the value property on execution.

See the whole concept of mutableStateOf from the below-defined example:

https://medium.com/media/37747fbc39db213d521e6a1fa8c3bba1/href

If you want to get more clarification then route to my Scaffold tutorial:

AliAzaz/PracticeComposeExamples

The output of scaffold is:

Scaffold output

I hope this article was useful to cover the basic questions regarding Jetpack Compose state management and explore the benefits behind it. Follow me on Twitter for more updates:

Thanks for spending your time reading this article. Please share if you’ve enjoyed it!

Connect with me on my socials and become my friend on Medium, Github, and LinkedIn.

Click 👏 to say “thanks!” and help others find this article.

To be up-to-date with great news on Kt. Academy, subscribe to the newsletter, observe Twitter, and follow us on Medium.

If you need a Kotlin workshop, check how we can help you: kt.academy.


JetPack Compose 🏹 — State Management was originally published in Kt. Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.