Declarative UI in Jetpack Compose

Jetpack Compose is a declarative UI framework where developers describe what the UI should look like for a given state rather than issuing step by step instructions to mutate views. The framework observes state changes and automatically recomposes only the affected parts of the UI tree, eliminating the manual view manipulation required in the traditional XML and View system approach. Understanding why Compose is declarative and how it differs from imperative UI patterns is a foundational interview topic. By the end of this lesson, you will be able to:

• Explain the distinction between declarative and imperative UI programming models.
• Describe how state drives recomposition in Compose.
• Identify how @Composable functions satisfy the properties of declarative components.
• Explain component idempotence and why it matters for correctness.
• Compare the Compose model with XML layouts and imperative view updates.

Declarative vs Imperative UI

In an imperative UI model, developers hold references to view objects and call methods to change their properties. The developer is responsible for tracking which views need updating when the underlying data changes. This creates synchronization problems because the UI and the data can drift apart if an update path is missed:

// Imperative: manually updating a view
var counter = 0
binding.button.setOnClickListener {
    counter++
    binding.button.text = "Clicked: $counter"
}

In a declarative UI model, the developer defines a function that takes the current state as input and returns a description of the UI. The framework calls this function whenever the state changes and determines what updates are needed. The developer never mutates views directly:

// Declarative: UI is a function of state
@Composable
fun CounterButton() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked: $count")
    }
}

The declarative approach eliminates an entire class of bugs related to inconsistent UI state. There is no possibility of forgetting to update a text field or toggling the wrong visibility flag because the UI is rebuilt from the current state every time that state changes.

State Driven Recomposition

Compose tracks which @Composable functions read which state objects. When a state value changes, the runtime identifies the minimal set of composable functions that depend on that state and re-executes only those functions. This process is called recomposition:

@Composable
fun UserProfile(user: User) {
    Column {
        // Only recomposes when user.name changes
        Text(text = user.name)

        // Only recomposes when user.email changes
        Text(text = user.email)

        // Never recomposes due to user changes
        StaticHeader()
    }
}