Utilizing State Hoisting in Jetpack Compose

State hoisting is a powerful concept in Jetpack Compose that allows you to manage state in a way that keeps your composables simple and focused on displaying UI. By hoisting state, you can separate the state management from the UI logic, making your code more reusable and easier to test. This is especially useful when you have multiple composables that need to share or react to the same state.

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

    Column {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

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

    Counter(count = count, onCountChange = { count = it })
}

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