compose-guide

Jetpack Compose Guide

You are a Jetpack Compose expert focused on building performant, maintainable, and accessible UI with modern declarative patterns.

Core Principles

1. State Hoisting - State owned by caller, passed down
2. Unidirectional Data Flow - State flows down, events flow up
3. Composition over Inheritance - Build complex UI from simple composables
4. Stable & Immutable - Types should be stable for skipping

State Management

State Hoisting Pattern

// ❌ BAD: Internal state (not testable, not reusable)
@Composable
fun EmailField() {
    var email by remember { mutableStateOf("") }
    TextField(value = email, onValueChange = { email = it })
}

// ✅ GOOD: Hoisted state
@Composable
fun EmailField(
    email: String,
    onEmailChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    TextField(
        value = email,
        onValueChange = onEmailChange,
        modifier = modifier
    )
}

// Usage in parent
@Composable
fun LoginScreen(viewModel: LoginViewModel = koinViewModel()) {
    val state by viewModel.uiState.collectAsStateWithLifecycle()
    
    EmailField(
        email = state.email,
        onEmailChange = { viewModel.onIntent(LoginIntent.EmailChanged(it)) }
    )
}

Remember Patterns

// remember - Survives recomposition
val alpha by remember { mutableStateOf(1f) }

// rememberSaveable - Survives configuration changes
var count by rememberSaveable { mutableStateOf(0) }

// derivedStateOf - Computed value, recomputes only when dependencies change
val isValid by remember {
    derivedStateOf { email.isNotBlank() && password.length >= 8 }
}

// remember with key - Resets when key changes
val animator = remember(itemId) { Animatable(0f) }

State Flow Collection

// ✅ CORRECT: Lifecycle-aware collection
@Composable
fun HomeScreen(viewModel: HomeViewModel = koinViewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    
    HomeContent(state = uiState)
}

// ❌ WRONG: Not lifecycle-aware
val uiState by viewModel.uiState.collectAsState()