Understanding State in Jetpack Compose: Remember and State Hoisting

Hello, Android Enthusiasts! 👋

If you’ve been diving into Jetpack Compose, you’ve probably heard the term “State” tossed around like confetti at a party. But what is “state,” and why does everyone keep saying we need to “hoist” it? Let’s take a relaxed, relatable journey into state in Jetpack Compose, using everyday analogies and code examples to bring it to life.

What is State, Anyway?

Think of “state” as a cup of coffee ☕️. In the morning, you start with a full cup. But as the day goes on, you take sips, and the coffee level goes down. Your coffee cup’s “state” (its current coffee level) changes over time. In Jetpack Compose, “state” is similar: it’s just data that changes over time and affects what you see on your screen.

For example, imagine a counter app. You tap a button, and a number on the screen goes up. That number is your state — it changes based on your action.

The remember Function: Storing State Locally

Now, how do we store this state in Jetpack Compose? Enter the hero of the day: the remember function. remember is like your phone's memory. It remembers things for you (like the coffee level) so that every time you need it, you don't have to start over.

Let’s create a simple counter to see it in action!

@Composable
fun CoffeeCounter() {
    var coffeeLevel by remember { mutableStateOf(5) } // Start with 5 sips of coffee!

    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Coffee level: $coffeeLevel cups left")
        Button(onClick = { coffeeLevel -= 1 }) {
            Text("Sip Coffee")
        }
    }
}

In this code:

• We’re using remember to make sure coffeeLevel doesn’t reset every time this composable is re-rendered.
• mutableStateOf(5) sets the initial state of coffeeLevel to 5 (like starting with 5 sips left).

When you click the button, the coffee level decreases by 1, just like sipping your morning coffee!

State Hoisting: Sharing State Between Composables

Now let’s say we want to have a “Refill Coffee” button in another part of the screen. Our CoffeeCounter component can't handle that refill itself – it’s like having to get up and go to the coffee machine. So, we need state hoisting.

State hoisting is like moving the coffee cup to a central table, so everyone (all components) can see it and update it. In Jetpack Compose, this means lifting the state up to a shared parent so multiple children can access and change it.

Here’s how it works:

1. Hoist the state by moving it to the parent composable.
2. Pass it down to child composables.
3. Update it from any child component.

Let’s see this with code:

@Composable
fun CoffeeMachine() {
    var coffeeLevel by remember { mutableStateOf(5) } // State is lifted here!

    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CoffeeCounter(coffeeLevel = coffeeLevel, onSip = { coffeeLevel -= 1 })
        RefillButton(onRefill = { coffeeLevel += 5 })
    }
}

@Composable
fun CoffeeCounter(coffeeLevel: Int, onSip: () -> Unit) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Coffee level: $coffeeLevel cups left")
        Button(onClick = onSip) {
            Text("Sip Coffee")
        }
    }
}

@Composable
fun RefillButton(onRefill: () -> Unit) {
    Button(onClick = onRefill) {
        Text("Refill Coffee")
    }
}

• CoffeeMachine manages the state (coffeeLevel), and both CoffeeCounter and RefillButton can now access it.
• onSip and onRefill are callbacks that CoffeeCounter and RefillButton use to update coffeeLevel.

Now, every time you click “Sip Coffee” or “Refill Coffee,” both buttons affect the same coffeeLevel state.

Breaking it Down: Why Hoist State?

Think of state hoisting like your favorite group chat:

• One person starts a thread (the parent state).
• Everyone else chimes in (child components) with their input.

By hoisting state, you avoid each child managing its own coffee level, which would get messy if everyone didn’t have the same value. With a single shared state in the parent, everyone sees and interacts with the latest coffee level.

Quick Tips on State Hoisting

• If only one component needs the state: Use remember within that component.
• If multiple components need the state: Hoist it up to the nearest common parent.
• Pass down a value and an onChange to the child to keep them synced.

Wrapping Up: A Few Last Sips

State management in Jetpack Compose is like managing your morning coffee supply. You “remember” your current level, hoist it up when others need to share it, and everyone gets to see the same coffee level update in real time. Pretty neat, right?

By using remember and state hoisting, you’ll create smoother, more efficient UIs, where every component can stay on the same page without unnecessary complexity.

And that’s a wrap! Now, go ahead and create your own “coffee counter” apps and experiment with state hoisting. With a bit of practice, you’ll be lifting state and keeping your apps as refreshing as a freshly brewed cup of coffee. ☕️

Happy Composing!