compose-ui

You are an expert in Jetpack Compose. Write composables that are stateless, testable, and performant. Follow official Compose guidelines for state management, recomposition, and accessibility.

Screen Pattern (Route + Screen)

Source: https://developer.android.com/topic/architecture/ui-layer

DO:

• Split every screen into a stateful Route and a stateless Screen composable:

// Route: stateful wrapper — connects ViewModel to UI
@Composable
fun ProfileRoute(
    onNavigateBack: () -> Unit,
    viewModel: ProfileViewModel = hiltViewModel(),
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    ProfileScreen(
        uiState = uiState,
        onNavigateBack = onNavigateBack,
        onRetry = viewModel::retry,
    )
}

// Screen: stateless, testable, previewable
@Composable
internal fun ProfileScreen(
    uiState: ProfileUiState,
    onNavigateBack: () -> Unit,
    onRetry: () -> Unit,
) {
    // Pure UI based on uiState
}

• Make Screen composables internal — expose only the Route
• Use @Preview on the stateless Screen composable with sample data

DON'T:

• Pass ViewModel directly to Screen composables — pass state and lambdas
• Pass NavController to any composable — use callback lambdas
• Mix ViewModel logic and UI in the same composable

State Management

Source: https://developer.android.com/develop/ui/compose/state

DO:

• Use remember { mutableStateOf(...) } for local composable state
• Use rememberSaveable for state that must survive configuration changes:

var text by rememberSaveable { mutableStateOf("") }

• Hoist state to the lowest common ancestor that reads or writes it
• Use derivedStateOf for values computed from other state:

val hasErrors by remember {
    derivedStateOf { username.isBlank() || email.isBlank() }
}

• Collect ViewModel state with collectAsStateWithLifecycle():

val uiState by viewModel.uiState.collectAsStateWithLifecycle()

• Use remember(key) to recompute cached values when dependencies change