State Management in Android Jetpack Compose

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.

What we'll learn few important concepts mentioned below:

• What is a state in Jetpack Compose?
• How does recompose function?
• Different ways to manage state in Jetpack Compose.

What is a State in Jetpack Compose?

In jetpack compose, 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.

State Subscription

Composable functions subscribe to a state. When the state changes, only the subscribed composables are recomposed, ensuring optimal performance.

Example: If three Text composables subscribe to the same state, updating the state will automatically update all three texts.

How does Recompose Function?

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.

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

1. Using MutableState : A MutableState holds a value and notifies subscribed composables when the value changes.
2. Using @Model Annotation (Deprecated) : The @Model annotation was an experimental way to create observable state objects, but it is now deprecated. Instead, MutableState with a ViewModel is the recommended approach.

Let us now look at how we can use both of them. We'll look at an example that includes both MutableState and Model.

- Using MutableState

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

setupStateUsingState()

@Composable
private fun setupStateUsingState() {  
    // Define a mutable state variable
    var count by remember { mutableStateOf(0) }  

    Column {  
        Text(text = "GeeksforGeeks", fontSize = 20.sp)  

        Text(text = "Count: $count", fontSize = 18.sp)  

        Button(onClick = { count += 5 }) {  
            Text(text = "Increase Count")  
        }  
    }  
}

Code Breakdown:

• mutableStateOf(0): Holds an initial state value of 0.
• remember {}: Ensures the state persists across recompositions.
• count += 5: Updates the state, triggering UI recomposition.

- Using @Model Annotation

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.

@Model
class Counter {
    var value: Int = 0
}

@Composable
private fun setupStateUsingModel() {  
    val counter = Counter()  

    Column {  
        Text(text = "GeeksforGeeks Courses", fontSize = 20.sp)  

        Text(text = "Courses: ${counter.value}", fontSize = 18.sp)  

        Button(onClick = { counter.value += 5 }) {  
            Text(text = "Display Course")  
        }  
    }  
}