Open In App

State Management in Android Jetpack Compose

Improve
Improve
Like Article
Like
Save
Share
Report

Working with Jetpack Compose in Android and want to update the UI with newly updated data on the fly. This can be handled by using Jetpack Compose’s state management. This tutorial will teach you how to manage the state in Jetpack Compose. We will discover,

  1. In Jetpack Compose, what is a state?
  2. How does recompose function?
  3. Compose states can be managed in a variety of ways.

In Jetpack Compose, what is a state?

In general, a state is an object that contains data that is mapped to one or more widgets. We can update the data shown in the widgets by using the value from the state object. The value of the state can change during runtime, which allows us to update the widget with new data. The composable in Jetpack Compose updates itself based on the value of the state. When the value is changed, the composable function only re-composes the composable whose data has been changed and ignores the others.

GeekTip: #1 The composable in Jetpack Compose are subscribed to a state, and when the value of the state is updated, the value of all the composable who are subscribed to it is also updated. All three texts are subscribed to a state in this case, and when the value of state changes, the text in these three is also updated.

When we recompose the UI, the UI tree does not redraw itself but only updates the specific composable because redrawing the entire UI would be a very expensive task. But how does it determine which compostables to update? Jetpack Compose is based on the concept of Positional Memoization, which is a technique for optimizing program function calls and returning the cached result. When we draw the UI for the first time in Compose, it caches all the composable in the UI tree.

Compose states can be managed in a variety of ways

We can manage the state in Jetpack Compose in two ways.

  1. MutableState – In this case, the state stores the value on execution and, if any composable is subscribed to it, the composable updates the value if it changes.
  2. Model – We use Model as an annotation to any class that will assist us in updating the UI.

Let us now look at how we can use both of them. We’ll look at an example that includes both MutableState and Model. But first, let’s make an application and get it up and running. Our primary activity would be as follows:

Kotlin




class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SomeUI {
                GFG()
            }
        }
    }
    @Composable
    fun GFG() {
    }
}


We will update our state in this App composable function. We want to create a text and a button in this application. Each time we click the button, the text increases the value by 5.

So, let’s get started on the implementation.

Using MutableState in Compose 

To begin, we’ll create a composable function called,

setupStateUsingState()

Kotlin




@Composable
private fun setupStateUsingState() {
    Column {
        Title(
            title = { Text(text = "GFGManagement") }
        )
        Display(
            someVal= // set new value
        )
        Button(onClick = {
            // update value
        }) {
            Text(text = "GFG Course Taken")
        }
    }
  
}


Here, we’ve added a TopAppBar, Text, and Button as basic components. I’ve added an onClick function to the Button that will update the value, and we’ll update the value in Text. Now, we’ll make a MutableState variable with the value 0 as its initial value. When we click the button, the value is increased by 08, and the state is re-composed to redraw the UI. As a result, when the value is updated by clicking a button, the Text re-composes itself to display the updated value.

Modeling in Compose

A Model can also be used to handle state changes in Jetpack compose. In Jetpack Compose, the model is an annotation that can be used in any class. If any composable receives a value from any parameter of a class annotated with @Model, and the value of the parameter changes, the UI recomposes itself. This is the result of using MutableState and Model to manage the state.

Kotlin




@Composable
private fun setupStateUsingModel() {
    Column {
        TopAppBar(
            title = { Text(text = "Course Management") }
        )
        SomeBubble(
            text = // set new value
        )
        Button(onClick = {
            // update value
        }) {
            Text(text = "Display Course")
        }
    }
}


Let us now create a data class Counter with an Int parameter value and an initial value of 0. The class will be annotated with @Model.

Kotlin




@Composable
private fun setupStateUsingModel() {
    val counter = Counter()
    Column {
        TitleBar(
            title = { Text(text = "Course Management") }
        )
        Theme(
            bubble = counter.value.toString()
        )
  
        Button(onClick = {
            counter.value += 5
        }) {
            Text(text = "Click to view courses")
        }
    }
}




Last Updated : 23 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads