Understanding State in Jetpack Compose (Simple Guide for Beginners)

When I first started learning Jetpack Compose, one concept confused me a lot: State.

But once I understood it, everything became much easier.

Let me explain it in a simple way 👇

🔄 What is State?

Think of State like a light switch.

• When the switch changes → the light updates
• When state changes → the UI updates

In Jetpack Compose, UI is automatically redrawn when state changes.

🧩 Basic Example

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

    Column {
        Text(text = "Count: $count")

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

🧠 What’s happening here?

• remember → keeps value during recomposition
• mutableStateOf → creates observable state
• count++ → updates state → UI updates automatically

👉 You don’t manually refresh UI. Compose does it for you.

⚠️ Common Beginner Mistakes

❌ Mistake 1: Not using remember

var count = 0 // WRONG

👉 This resets on every recomposition.

❌ Mistake 2: Doing heavy work in Composable

@Composable
fun BadExample() {
    val data = fetchDataFromNetwork() // ❌ Don't do this
}

👉 This blocks UI and can cause lag.
✔️ Use ViewModel + Coroutines instead.

🏗️ Recommended Pattern (Simple MVVM)

• UI → shows state
• ViewModel → holds state
• Repository → handles data

👉 Keep your Composable stateless when possible

Use State hoisting:

@Composable
fun Counter(count: Int, onIncrease: () -> Unit)

👉 This makes your UI reusable and clean.

🎯 Final Thought
If you understand State, you understand Compose.

Everything in Compose depends on:

“State changes → UI updates”