jetpack-compose

Jetpack Compose Patterns

Modern declarative UI patterns for Android.

State Management

State Hoisting

// ✅ CORRECT: Stateless composable
@Composable
fun Counter(
    count: Int,
    onIncrement: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier) {
        Text("Count: $count")
        Button(onClick = onIncrement) {
            Text("+")
        }
    }
}

// Parent owns state
@Composable
fun CounterScreen() {
    var count by rememberSaveable { mutableIntStateOf(0) }
    
    Counter(
        count = count,
        onIncrement = { count++ }
    )
}

Remember Variants

// remember - Survives recomposition. Use mutableIntStateOf/mutableFloatStateOf/
// mutableLongStateOf/mutableDoubleStateOf for primitives (avoids autoboxing).
var alpha by remember { mutableFloatStateOf(1f) }

// rememberSaveable - Survives config change and process death (Bundle-storable
// values automatically; anything else needs a Saver)
var count by rememberSaveable { mutableIntStateOf(0) }

// remember with key - Resets on key change
val animation = remember(itemId) { Animatable(0f) }

// derivedStateOf - Recomposes readers only when the RESULT changes.
// Inputs must be snapshot State reads (here email/password are State-backed);
// plain parameters won't trigger recalculation - use remember(param) instead.
val isValid by remember {
    derivedStateOf { email.isNotBlank() && password.length >= 8 }
}

Collecting Flows

// androidx.lifecycle:lifecycle-runtime-compose
// Stops collection when the UI is not visible (unlike collectAsState)
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

Composition Patterns

Slot API

// M3 TopAppBar itself is stable (material3 1.4.0) - no opt-in needed.
// @OptIn(ExperimentalMaterial3Api::class) is still required if you pass a
// scrollBehavior: TopAppBarScrollBehavior is experimental in 1.4.0.
@Composable
fun AppBar(
    title: @Composable () -> Unit,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {}
) {
    TopAppBar(
        title = { title() },
        navigationIcon = { navigationIcon() },
        actions = actions
    )
}

// Usage
AppBar(
    title = { Text("Home") },
    navigationIcon = { IconButton(onClick = {}) { Icon(Icons.Default.Menu, null) } },
    actions = {
        IconButton(onClick = {}) { Icon(Icons.Default.Search, null) }
    }
)