State Management in Jetpack Compose

Working with Jetpack Compose in Android and want to update UI on run time can be handled by managing the state in Jetpack Compose. In this article, we’re going to learn:

• How to manage state in Jetpack Compose?
• Manage State ways in Compose

How to manage state in Jetpack Compose?

First of all, What is the state? Let’s take a look at it. State in general term is an object that contains certain data that is mapped to one or many widgets. The value of the state can change during the runtime which will help us to update the widget with the updated data.

In Compose, the composable update itself is based on the value of the state. When the value is updated, the composable function only re-composes the composable whose data is updated

Here, all three texts are subscribed to a state, and when the value of state changes, the text in these three would also be updated.

Manage State ways in Compose

In Compose, we can manage state with MutableState,

Now, let us understand how we can use it?.

Firstly let's create an application and do the basic setup. Our MainActivity would look like,

In this application, we want to design a textField. Normally we know it as editText. When we click the textField and write something inside, display what is written on the screen

So, now let’s start implementing.

Using MutableState in Compose

First, we will create a composable function called,

Here, we have added basic composable of a TextField. In TextField, I have added, the onValueChange where will update the value and in TextField, we will update the value.

Now, we will create a variable of the type MutableState which will hold an initial value of “ ”. When we write inside the Textfield state would re-compose to the UI.

MutableState gives us the value property on execution. The Composable function subscribes to the MutableState and when the value changes, the re-composition of the composable happens and hence the value gets updated.

Here, in our example, we’re using remember with MutableState. Composable functions can store a single object in memory by using the remember composable. A value computed by remember is stored in the Composition during initial composition, and the stored value is returned during recomposition. remember can be used to store both mutable and immutable objects.

In this way, we ensure that the input is printed on the screen each time keeping in mind.

Good learning.