compose-state-holder-ui-split

Decoupling state management from UI rendering in Jetpack Compose involves introducing a dedicated state-holder composable that wires to a ViewModel while a separate plain UI composable renders layout, improving testability and reuse across Android and multiplatform targets.

Business logic leaks into Jetpack Compose UI code when state and side effects are collected directly inside layout composables, which you prevent by collecting them in a dedicated state-holder composable that exposes plain UI state and callbacks.

Separating state wiring from layout in Android Kotlin Compose screens is best done by creating a small public state-holder composable that handles ViewModel connections and side effects, rendering a plain UI composable that only consumes plain UI state and navigation callbacks.

Using a state-holder pattern improves Compose UI testability and preview by isolating state management from layout, allowing the plain UI composable to render independently of dependency injection and ViewModel wiring for direct testing.

This Compose state-holder approach works with Android multiplatform targets by isolating state management from layout, enabling the plain UI composable to render consistently across Android, Desktop, and other multiplatform environments without business logic dependencies.

You should not use a separate state-holder composable in Jetpack Compose for simple screens lacking ViewModels, navigators, or side effects, as the added architectural overhead provides little value without complex state wiring to isolate.