Derived state in Android Kotlin - UI Render Trace

Component - Derived state

This UI component shows how derived state works in Android Kotlin Compose. Derived state means the UI updates automatically when some base data changes, by calculating new values from that data.

Here, a counter increments on button click, and a derived state shows if the count is even or odd.

Widget Tree

Column
├── Text ("Count: X")
├── Text ("Even or Odd")
└── Button ("Increment")

The root is a vertical Column layout. It contains two Text widgets stacked vertically: one shows the current count number, the other shows if the count is even or odd. Below them is a Button to increment the count.

Render Trace - 4 Steps

Step 1: Column

Step 2: Text (Count)

Step 3: Text (Even/Odd)

Step 4: Button

State Change - Re-render

Trigger:User taps the Increment button

Before

count = 0, derivedState = "Even"

→

After

count = 1, derivedState = "Odd"

Re-renders:Entire Column recomposes, updating both Text widgets with new count and derived state

UI Quiz - 3 Questions

What happens to the "Even or Odd" text when the count changes from 0 to 1?

A It changes from "Even" to "Odd"

B It stays "Even"

C It disappears

D It changes to the count number

Key Insight

Derived state helps keep UI consistent and efficient by automatically recalculating values from base data. In Compose, using derivedStateOf avoids unnecessary recompositions and keeps UI smooth.