Jetpack Compose Performance: Eliminating Jank and Unnecessary Recompositions

// With strong skipping (default from Kotlin 2.0.20) this is skippable.
// It is skipped when the SAME list instance is passed again.
@Composable
fun UserList(users: List<User>) {
    LazyColumn {
        items(users, key = { it.id }) { user -> UserRow(user) }
    }
}

// PROBLEM: a new list instance on every recomposition never
// passes ===, so UserList recomposes every time.
@Composable
fun UsersScreen(all: List<User>, query: String) {
    UserList(users = all.filter { query in it.name })
}

// FIX 1: produce the list once per input change
@Composable
fun UsersScreen(all: List<User>, query: String) {
    val visible = remember(all, query) {
        all.filter { query in it.name }
    }
    UserList(users = visible)
}

// FIX 2: an immutable collection is stable, so it is compared
// with equals() and equal content skips.
import kotlinx.collections.immutable.ImmutableList

@Composable
fun UserList(users: ImmutableList<User>) { /* ... */ }

@Composable
fun MessageList(messages: ImmutableList<Message>) {
    val listState = rememberLazyListState()

    // BAD: read in composition, so this composable recomposes
    // every time the first visible index changes
    // val showButton = listState.firstVisibleItemIndex > 0

    // GOOD: recomposes only when the boolean flips
    val showScrollToTop by remember {
        derivedStateOf { listState.firstVisibleItemIndex > 0 }
    }

    Box {
        LazyColumn(state = listState) {
            items(messages, key = { it.id }) { message ->
                MessageBubble(message)
            }
        }

        AnimatedVisibility(
            visible = showScrollToTop,
            modifier = Modifier.align(Alignment.BottomEnd)
        ) {
            ScrollToTopButton()
        }
    }
}

// NOT a use for derivedStateOf: the result changes exactly
// as often as its inputs.
// val fullName by remember { derivedStateOf { "$first $last" } }
val fullName = "$first $last"

// What you write
@Composable
fun Parent(item: Item, onItemClick: (String) -> Unit) {
    ItemRow(item = item, onClick = { onItemClick(item.id) })
}

// What the compiler generates with strong skipping:
// the lambda is remembered, keyed on its captures.
@Composable
fun Parent(item: Item, onItemClick: (String) -> Unit) {
    val onClick = remember(item, onItemClick) {
        { onItemClick(item.id) }
    }
    ItemRow(item = item, onClick = onClick)
}

// Deferring a read: scroll changes every frame
// BAD: the value is read in composition
Title(snack, scroll.value)

// GOOD: the lambda is read where the value is used
Title(snack) { scroll.value }

// Same idea with a modifier: the lambda form reads in the
// layout phase, so composition does not re-run.
Box(Modifier.offset { IntOffset(0, scroll.value) })

// BAD: no keys, identity is position
LazyColumn {
    items(users) { user -> UserRow(user) }
}

// GOOD: a stable, unique key per item
LazyColumn {
    items(users, key = { it.id }) { user ->
        UserRow(user)
    }
}

// BAD: throws IllegalStateException
Column(Modifier.verticalScroll(rememberScrollState())) {
    Text("Header")
    LazyColumn {
        items(users, key = { it.id }) { UserRow(it) }
    }
}

// GOOD: one lazy list, header as an item
LazyColumn {
    item {
        Text(
            "Team Members",
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.padding(16.dp)
        )
    }
    items(users, key = { it.id }) { user ->
        UserRow(user)
    }
}

// module build.gradle.kts
android {
    // ...
}

// Top level, not inside android { }
composeCompiler {
    reportsDestination = layout.buildDirectory.dir("compose_compiler")
    metricsDestination = layout.buildDirectory.dir("compose_compiler")
}

// Run: ./gradlew assembleRelease
// Read build/compose_compiler/<module>-composables.txt
//
// restartable skippable fun SnackCollection(
//   stable snackCollection: SnackCollection
//   stable onSnackClick: Function1<Long, Unit>
// )
//
// and <module>-classes.txt for why a class is unstable:
//
// unstable class Snack {
//   stable val id: Long
//   unstable val tags: Set<String>
// }