Jetpack Compose

How Recomposition Works

Recomposition = Compose re-running a composable function because its inputs changed. The goal is to recompose as little as possible, as rarely as possible.

• A State or StateFlow value that the composable reads changes
• The composable's parameters change and are considered unstable
• A parent recomposes and passes new (or unstable) values down

Preventing Unnecessary Recomposition

Understanding and fixing recomposition issues is the most-tested Compose topic at Staff level.

derivedStateOf — When and How

Creates a derived state that recalculates only when its source state changes. Use it when a computed value changes less frequently than the state it reads from.

// Wrong — recalculates on every recomposition
val isButtonEnabled = inputText.length > 3

// Correct — recalculates only when inputText changes
val isButtonEnabled by remember { 
  derivedStateOf { inputText.length > 3 } 
}

// Classic example — scroll-to-top button
val showScrollToTop by remember {
  derivedStateOf { listState.firstVisibleItemIndex > 0 }
}

Interview tip: Use derivedStateOf when: (1) you compute a value from state, AND (2) the derived value changes less often than the source state. Don't use it for simple direct reads — the overhead costs more than it saves.

LazyColumn — Long List Best Practices

LazyColumn composes only the visible items plus a small buffer. Getting it wrong causes jank and dropped frames on any list with 50+ items.

// Always provide a stable key
LazyColumn {
  items(messages, key = { it.id }) { message ->
    MessageRow(message = message)
  }
}

// Use contentType for mixed-content lists
items(feed, key = { it.id }, contentType = { it.type }) { item -> 
  // ... 
}

Interview tip: Say: 'I'd verify with the Recomposition Highlighter in Layout Inspector before shipping, and set up a benchmark with Macrobenchmark to catch regressions in CI.'

State Hoisting Pattern

Move state up to the lowest common ancestor that needs it. Composables should be stateless where possible — easier to test and reuse.

• Stateless composable — receives values and callbacks as parameters; owns no state
• Stateful composable — holds state via remember or hoists from ViewModel
• Single source of truth — state lives in one place; composables read and emit, not own

@Composable
fun SearchBar(
  query: String,           // state passed in
  onQueryChange: (String) -> Unit  // event passed out
) { ... }

Compose Performance Profiling — Perfetto & Macrobenchmark

Recomposition Highlighter shows what recomposes; Perfetto shows why it's slow; Macrobenchmark proves it in CI. Use all three — each answers a different question.

• Recomposition Highlighter (Layout Inspector) — highlights composables in red when they recompose; use this first to find hot spots
• Perfetto trace — captures composition, measure, layout, draw phases as Systrace slices; look for frames > 16ms
• FrameTimingMetric in Macrobenchmark — measures jank (frames > 16ms) in automated CI; catches regressions before release
• Baseline Profiles (AGP 8+) — pre-compile hot-path bytecode at install time; reduces cold start 20–40% on average, typically toward the lower end for most apps, first-frame latency up to 30%
• Composition tracing (Compose 1.3+) — emits composable names into Perfetto trace; requires profileable build type

// Macrobenchmark — measure scroll performance in CI
@LargeTest
@RunWith(AndroidJUnit4::class)
class FeedScrollBenchmark {
    @get:Rule
    val rule = MacrobenchmarkRule()

    @Test
    fun scrollFeed() = rule.measureRepeated(
        packageName = "com.example.app",
        metrics = listOf(FrameTimingMetric()),   // captures jank frames
        iterations = 5,
        startupMode = StartupMode.COLD,
        setupBlock = { pressHome() }
    ) {
        startActivityAndWait()
        val feed = device.findObject(By.res("feed_list"))
        feed.setGestureMargin(device.displayWidth / 5)
        feed.fling(Direction.DOWN)
        device.waitForIdle()
    }
}

// Baseline Profile — pre-compile hot paths at install time
// (generated via BaselineProfileRule, shipped in src/main/baseline-prof.txt)
// Reduces cold start 20-40% on average on first run after install

Interview tip: When discussing Compose performance, say: I'd use the Recomposition Highlighter to find hot spots, verify with a Perfetto trace, then add a Macrobenchmark with FrameTimingMetric to prevent CI regressions. Baseline Profiles ship with the build for 20–40% cold start improvement on average, typically toward the lower end for most apps.