Can you explain the principle of the mutableStateOf function in Jetpack Compose and how it manages UI state?

The mutableStateOf function in Jetpack Compose creates a state object that holds a mutable value and notifies Compose of its changes.

When the value wrapped in mutableStateOf changes, Compose automatically redraws the parts of the UI that depend on this state. This allows for efficient UI state management without manually updating the UI.

Example of usage:

var count by mutableStateOf(0)

Button(onClick = { count++ }) {
    Text("Clicked $count times")
}

Here, each button press increases the count value, and the text updates automatically thanks to the state tracking system implemented through mutableStateOf.