compose-state-holder-ui-split

To separate state logic from UI in Jetpack Compose, create a small state-holder composable that collects state and wires callbacks, keeping the UI composable layout-focused and consuming a plain UI state object.

The state-holder pattern in Compose uses a public composable to connect to ViewModels and handle navigation, exposing a plain UI state and callback-based navigation to the UI component. This keeps layout concerns isolated from business logic wiring.

To make Compose screens preview-friendly with a ViewModel, split state-holder wiring from UI rendering. The UI composable consumes a plain state object and callbacks, allowing you to render previews without needing the ViewModel or business logic dependencies.

Yes, the state-holder composable handles callback-based navigation and wires to the ViewModel, while the UI composable remains strictly layout-focused. This preserves layout responsibilities in the UI component and exposes navigation through plain callbacks.

Split state wiring from UI rendering in Jetpack Compose when a screen uses a ViewModel, collects state or effects, handles navigation, and wires callbacks. This pattern improves testability and previewability for screens with complex state management.