compose-multiplatform-patterns

Compose Multiplatform Patterns

Shared UI across Android, iOS, Desktop, and Web via Compose Multiplatform, plus Jetpack Compose specifics on Android. Core mental model: state flows down as an immutable snapshot, events flow up as callbacks — the same unidirectional-data-flow discipline as SwiftUI or React, expressed with Kotlin's StateFlow and Compose's recomposition system instead of a virtual DOM diff.

When to use

Building Compose UI (Jetpack Compose or Compose Multiplatform); wiring ViewModels to screen state; implementing navigation in a KMP or Android project; designing reusable composables; diagnosing excess recomposition or janky lists.

State management

Single state data class per screen, exposed as StateFlow, collected with lifecycle awareness:

data class ItemListState(
    val items: List<Item> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null,
    val searchQuery: String = ""
)

class ItemListViewModel(private val getItems: GetItemsUseCase) : ViewModel() {
    private val _state = MutableStateFlow(ItemListState())
    val state: StateFlow<ItemListState> = _state.asStateFlow()

    fun onSearch(query: String) {
        _state.update { it.copy(searchQuery = query) }
        viewModelScope.launch {
            _state.update { it.copy(isLoading = true) }
            getItems(query).fold(
                onSuccess = { items -> _state.update { it.copy(items = items, isLoading = false) } },
                onFailure = { e -> _state.update { it.copy(error = e.message, isLoading = false) } }
            )
        }
    }
}

@Composable
fun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {
    val state by viewModel.state.collectAsStateWithLifecycle()
    ItemListContent(state = state, onSearch = viewModel::onSearch)
}

@Composable
private fun ItemListContent(state: ItemListState, onSearch: (String) -> Unit) {
    // Stateless — trivially previewable and testable in isolation
}

collectAsStateWithLifecycle (not plain collectAsState) stops collecting when the composable leaves the started lifecycle state, avoiding wasted work and leaked collection in backgrounded screens.