Efficiently Rendering Large Lists with Lazy Layouts

When displaying hundreds or thousands of items in Jetpack Compose, standard layouts like Column compose all children at once, regardless of visibility. This causes unnecessary memory consumption and composition overhead, leading to UI jank. Lazy layouts such as LazyColumn, LazyRow, and LazyVerticalGrid solve this by composing only the items currently visible on screen and recycling items that scroll out of view. By the end of this lesson, you will be able to:

• Explain how lazy layouts differ from standard layouts in composition behavior.
• Use LazyColumn, LazyRow, and LazyVerticalGrid for efficient list rendering.
• Apply stable keys to preserve item state and minimize recomposition during list changes.
• Identify common performance pitfalls when working with lazy layouts.

How Lazy Layouts Work

A Column with 1000 children composes all 1000 items immediately, even if only 10 are visible on screen. Each item goes through composition, layout, and drawing phases, consuming memory and CPU time for content the user cannot see.

LazyColumn changes this by composing items on demand. As the user scrolls, new items are composed when they enter the visible area, and items that leave the visible area are disposed. This keeps the number of composed items roughly constant regardless of the total list size.

@Composable
fun ItemList(items: List<Item>) {
    LazyColumn {
        items(items) { item ->
            Text(
                text = item.name,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

The items function inside the LazyListScope registers a factory for each item. The runtime invokes the factory only when the item becomes visible.

LazyRow for Horizontal Lists

LazyRow applies the same on demand composition strategy for horizontally scrolling content:

@Composable
fun HorizontalItemList(items: List<Item>) {
    LazyRow {
        items(items) { item ->
            Card(modifier = Modifier.padding(4.dp)) {
                Text(text = item.name)
            }
        }
    }
}