compose-state-holder-ui-split

To make Jetpack Compose screens previewable and testable, split your code into a state-holder composable for wiring and a UI composable that only accepts immutable state and callbacks, decoupling layout from ViewModels and side effects.

The state-holder pattern in Jetpack Compose UI architecture separates state and side-effect collection from layout rendering. A dedicated composable handles ViewModel wiring, while a plain UI composable renders layout using only immutable state.

To test Compose UI layout branches without the full app graph, supply plain immutable UI state and callback lambdas directly to a decoupled UI composable, bypassing ViewModel dependencies and navigation side effects entirely.

Yes, you can use Jetpack Compose Preview by isolating ViewModel collection and one-shot effects in a state-holder composable, allowing the separate UI composable to render previews using static, immutable state inputs.

A Jetpack Compose screen fails to render in Preview when the UI composable is tightly coupled to ViewModels, navigation, or side effects. Moving this wiring into a state-holder composable fixes the issue by enabling stateless rendering.

The best way to handle navigation and snackbars while keeping Compose UI testable is routing these side effects through a state-holder composable, passing only necessary event callbacks to a stateless UI composable for rendering.