Week 4 Wednesday: State in Jetpack Compose

CS 3180 Mobile Application Development

Today’s Demo Plan

1. What is state in Compose? (20 min)

Today’s Demo Plan (continued)

1. What is state in Compose? (20 min)
2. Working with state (25 min)

Today’s Demo Plan (continued)

1. What is state in Compose? (20 min)
2. Working with state (25 min)
3. State hoisting (30 min)

What is State?

What is State? (continued)

• Any value that can change over time

What is State? (continued)

• Any value that can change over time
• UI should update when state changes

The Problem Without State

@Composable
fun HoleScore() {
    var strokes = 0  //  Won't work!

    Button(onClick = { strokes++ }) {
        Text("Strokes: $strokes")
    }
}

The Fix: remember + mutableStateOf

@Composable
fun HoleScore() {
    var strokes by remember { mutableStateOf(0) }

    Button(onClick = { strokes++ }) {
        Text("Strokes: $strokes")
    }
}

Recomposition Basics

Recomposition Basics (continued)

• State changes trigger recomposition

Recomposition Basics (continued)

• State changes trigger recomposition
• Composables can run multiple times

State Types

// Property delegation (preferred)
var strokes by remember { mutableStateOf(0) }

// Without delegation
val strokes = remember { mutableStateOf(0) }
strokes.value++

Multiple State Variables

@Composable
fun ScoreEntry() {
    var currentHole by remember { mutableStateOf(1) }
    var strokes by remember { mutableStateOf(0) }
    var isConfirmed by remember { mutableStateOf(false) }

    Column {
        Text("Hole $currentHole")
        Row {
            Button(onClick = { if (strokes > 0) strokes-- }) { Text("-") }
            Text("$strokes", fontSize = 24.sp)
            Button(onClick = { strokes++ }) { Text("+") }
        }
        Row {
            Checkbox(
                checked = isConfirmed,
                onCheckedChange = { isConfirmed = it }
            )
            Text("Confirm score")
        }
    }
}

State with Data Classes

data class HoleState(
    val holeNumber: Int = 1,
    val par: Int = 4,
    val strokes: Int = 0,
    val isConfirmed: Boolean = false
)

@Composable
fun HoleScoreCard() {
    var state by remember { mutableStateOf(HoleState()) }

    Column {
        Text("Hole ${state.holeNumber} (Par ${state.par})")
        TextField(
            value = state.strokes.toString(),
            onValueChange = {
                state = state.copy(strokes = it.toIntOrNull() ?: 0)
            }
        )
    }
}

Derived State

@Composable
fun HoleResult() {
    var strokes by remember { mutableStateOf(4) }
    val par = 4

    val result = when {
        strokes < par -> "Under Par! "
        strokes == par -> "Par"
        strokes == par + 1 -> "Bogey"
        strokes == par + 2 -> "Double Bogey"
        else -> "Keep practicing!"
    }

    Column {
        Text("Strokes: $strokes")
        Text("Result: $result")
    }
}

Lists as State

@Composable
fun ScorecardList() {
    var scores by remember {
        mutableStateOf(listOf(0, 0, 0, 0, 0, 0, 0, 0, 0))
    }
    var currentHole by remember { mutableStateOf(0) }

    Column {
        scores.forEachIndexed { index, score ->
            Row {
                Text("Hole ${index + 1}:")
                Text("$score strokes")
            }
        }

        Button(onClick = {
            scores = scores.toMutableList().apply {
                this[currentHole] = this[currentHole] + 1
            }
        }) {
            Text("Add Stroke")
        }

        Text("Total: ${scores.sum()}")
    }
}

State Hoisting: The Problem

@Composable
fun HoleScoreInput() {
    var strokes by remember { mutableStateOf(0) }

    Row {
        IconButton(onClick = { if (strokes > 0) strokes-- }) {
            Icon(Icons.Default.Remove, "Decrease")
        }
        Text("$strokes")
        IconButton(onClick = { strokes++ }) {
            Icon(Icons.Default.Add, "Increase")
        }
    }
}

State Hoisting: The Solution

@Composable
fun HoleScoreInput(
    strokes: Int,
    onStrokesChange: (Int) -> Unit
) {
    Row {
        IconButton(onClick = { if (strokes > 0) onStrokesChange(strokes - 1) }) {
            Icon(Icons.Default.Remove, "Decrease")
        }
        Text("$strokes")
        IconButton(onClick = { onStrokesChange(strokes + 1) }) {
            Icon(Icons.Default.Add, "Increase")
        }
    }
}

State Hoisting: Parent Usage

@Composable
fun ScorecardScreen() {
    var scores by remember { mutableStateOf(List(18) { 0 }) }

    Column {
        scores.forEachIndexed { index, score ->
            Text("Hole ${index + 1}")
            HoleScoreInput(
                strokes = score,
                onStrokesChange = { newScore ->
                    scores = scores.toMutableList().apply {
                        this[index] = newScore
                    }
                }
            )
        }

        Text("Total: ${scores.sum()}")
    }
}

State Hoisting Pattern

State Hoisting Pattern (continued)

• State flows down (parameters)

State Hoisting Pattern (continued)

• State flows down (parameters)
• Events flow up (lambdas)

State Hoisting Pattern (continued)

• State flows down (parameters)
• Events flow up (lambdas)
• Composable becomes reusable

Benefits of Hoisting

Benefits of Hoisting (continued)

• Reusable across 18 holes

Benefits of Hoisting (continued)

• Reusable across 18 holes
• Testable with mock values

Benefits of Hoisting (continued)

• Reusable across 18 holes
• Testable with mock values
• Controllable from parent

When to Hoist State

When to Hoist State (continued)

• Shared state across multiple composables

When to Hoist State (continued)

• Shared state across multiple composables
• Parent needs control (reset, submit)

When NOT to Hoist State

• Internal UI-only state (animation, transient focus)

Activity: Team Selector Refactor

Refactor a stateful selector into a stateless component

Team Selector (Before)

@Composable
fun TeamSelector(teams: List<String>) {
    var selectedTeam by remember { mutableStateOf(teams.first()) }

    Column {
        Text("Select Team", style = MaterialTheme.typography.titleMedium)
        teams.forEach { team ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { selectedTeam = team }
                    .background(
                        if (team == selectedTeam) Color(0xFFE8F5E9) else Color.Transparent
                    )
                    .padding(16.dp)
            ) {
                Text(team)
                if (team == selectedTeam) {
                    Icon(Icons.Default.Check, "Selected", tint = Color(0xFF2E7D32))
                }
            }
        }
    }
}

Team Selector (After)

@Composable
fun TeamSelector(
    teams: List<String>,
    selectedTeam: String,
    onTeamSelected: (String) -> Unit
) {
    Column {
        Text("Select Team", style = MaterialTheme.typography.titleMedium)
        teams.forEach { team ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onTeamSelected(team) }
                    .background(
                        if (team == selectedTeam) Color(0xFFE8F5E9) else Color.Transparent
                    )
                    .padding(16.dp)
            ) {
                Text(team)
                if (team == selectedTeam) {
                    Icon(Icons.Default.Check, "Selected", tint = Color(0xFF2E7D32))
                }
            }
        }
    }
}

Team Selector: Parent Usage

@Composable
fun ScoreEntryScreen() {
    val teams = listOf("The Birdies", "Par-Tee Animals", "Fore Amigos", "The Sandbaggers")
    var selectedTeam by remember { mutableStateOf(teams.first()) }

    Column {
        TeamSelector(
            teams = teams,
            selectedTeam = selectedTeam,
            onTeamSelected = { selectedTeam = it }
        )

        Text("Entering scores for: $selectedTeam")
    }
}

Wrap-Up

Wrap-Up (continued)

• State makes Compose interactive

Wrap-Up (continued)

• State makes Compose interactive
• Derived state keeps logic clean

Wrap-Up (continued)

• State makes Compose interactive
• Derived state keeps logic clean
• Hoisting enables reuse and control