Compose walk-through part 2: Managing state
Tags: android, kotlin
Published: 2023-12-22 17:09:18

---
title: Compose walk-through part 2: Managing state
published: true
date: 2023-12-22 17:05:15 UTC
tags: Android,Kotlin
canonical_url: https://www.rockandnull.com/jetpack-compose-state-management-essentials/
---

 ![Compose walk-through part 2: Managing state](https://images.unsplash.com/photo-1620046311691-5d93d65f69e9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDR8fGRpc2t8ZW58MHx8fHwxNzAzMjY0NjI5fDA&ixlib=rb-4.0.3&q=80&w=2000)

In Jetpack Compose, managing state is a core aspect of building dynamic and interactive user interfaces. Understanding how the state works in Compose is essential for creating applications that respond dynamically to user input and data changes.

## Basic Principles of State in Compose

### Immutable State

In Compose, the state is represented using immutable data structures. This means that when you want to update the state, you create a new instance of the state object with the updated values. This immutability simplifies the management of state changes.

### MutableState

To manage state changes, Compose provides the `MutableState` interface, which is a wrapper around a value that can be observed and modified. Common implementations include `mutableStateOf` and `remember`.

### Composition and Re-composition

Compose operates on the principle of composition, where UI elements are built by composing smaller, reusable components. When the underlying state changes, Compose automatically triggers a re-composition of only the affected parts of the UI. This ensures efficient updates without the need for manual intervention.

## MutableState with mutableStateOf and remember

The `mutableStateOf` function is a simple and commonly used way to manage mutable state in Compose. It returns a `MutableState` object that can be observed and modified.

```
@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}
```

In this example, the Counter composable has a mutable state variable count, which is initialized to 0. The Button increments the count when clicked, triggering a re-composition of the Text displaying the count.

The `remember` function is used to store a value across recompositions. It's particularly useful for preserving a state that should survive configuration changes, such as screen rotations.

In this example, `remember` ensures that the count value is retained even if the device undergoes a configuration change.

## State Hoisting

State hoisting is a practice where the state is moved to a higher level in the composable hierarchy and passed down to child composables as parameters. This is useful when multiple composables need to share and synchronize the same state.

```
@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }

    Column {
        Counter(count = count, onCountChange = { 
              newCount -> count = newCount 
        })
        Spacer(modifier = Modifier.height(16.dp))
        AnotherComponent(count = count)
    }
}

@Composable
fun Counter(count: Int, onCountChange: (Int) -> Unit) {
    Button(onClick = { onCountChange(count + 1) }) {
        Text("Count: $count")
    }
}

@Composable
fun AnotherComponent(count: Int) {
    Text("Another Component Count: $count")
}
```

Here, the CounterApp composable hoists the count state and passes it down to both the Counter and AnotherComponent. Changes in one component are reflected in the other due to their shared state.

By understanding these fundamental principles of managing state in Compose, you'll be equipped to create dynamic and responsive user interfaces in your Android applications. As you delve deeper into Compose development, these principles will form the foundation for handling more complex state scenarios.

Until the next part, happy coding!

* * *

[

Compose walk-through part 1: Basic components

Uncover Jetpack Compose in this series. Let’s start with key elements like Columns, Rows, Text, Buttons, Spacers, and Surfaces. Master these building blocks for dynamic UIs, and extend your Android skills to multiple platforms.

 ![Compose walk-through part 2: Managing state](https://www.rockandnull.com/content/images/size/w256h256/2021/08/noun_The-King_544307.png)Rock and NullMike Yerou

 ![Compose walk-through part 2: Managing state](https://images.unsplash.com/photo-1522542550221-31fd19575a2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDJ8fGxheW91dHxlbnwwfHx8fDE3MDI3MzYyMzh8MA&ixlib=rb-4.0.3&q=80&w=2000)
](https://dev.to/rockandnull/compose-walk-through-part-1-basic-components-4kh2)