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
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, I have added, the
onValueChange where will update the
value and in
TextField, we will update the
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
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.