Notes

Jetpack Compose: Composition Phase

2 min read

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.

To better understand how composition fits into the bigger picture of Jetpack Compose:

Graph View

Backlinks