Jetpack Compose renders UI in three phases: Composition, Layout, and Drawing. The composition phase is what makes Compose special.
What is Composition?
Composition answers “What UI elements should be shown?” When you run a Compose app:
- Compose executes your @Composable functions
- It builds a UI tree that represents your screen
- It tracks which state variables each UI element uses
The Three Phases
Composition Phase: Decides what elements to show
- Builds the UI tree
- Doesn’t calculate sizes or positions yet
Layout Phase: Decides where to place elements
- Measures and positions each component
Drawing Phase: Decides how to display elements
- Renders everything to the screen
Recomposition: The Key to Efficiency
The real power of Compose is recomposition - updating only what changes:
@Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Column {
Text("Count: $count") // Recomposes when count changes
Button(onClick = { count++ }) {
Text("Increment") // Doesn't recompose when count changes
}
}
}
When the button is clicked and count changes, only the first Text updates - not the entire screen.
Skipping Unnecessary Work
Compose is smart about avoiding wasted effort:
- It only recomposes components that depend on changed state
- It caches results for components with unchanged inputs
- It uses “keys” to track list items efficiently
Composition vs. Layout Trees
Compose maintains two separate trees:
- Composition Tree: The logical UI structure
- Layout Tree: The physical sizes and positions
This separation allows Compose to update just what’s needed when state changes.
Summary
The composition phase is what makes Compose efficient. It:
- Builds a UI tree from your @Composable functions
- Tracks state dependencies
- Updates only what changes when state changes
- Works with the layout and drawing phases to render your UI
This approach makes Compose responsive and efficient even with complex, frequently changing UIs.
Related Articles
To better understand how composition fits into the bigger picture of Jetpack Compose:
- Jetpack Compose: Architecture - Learn about the layered architecture of Compose and how composition fits into the overall design
- Jetpack Compose: Custom Modifiers - Discover how to create reusable UI patterns using custom modifiers