Building Efficient Lists with LazyColumn in Jetpack Compose

Displaying Lists Efficiently: "LazyColumn" and "LazyRow"

What if you need to display 1,000 items? If you put them all in a Column, your app will crash from trying to render everything at once. The solution is to be "lazy." LazyColumn and LazyRow are Compose's powerful tools for displaying long lists of content efficiently.

---

What Does "Lazy" Mean?

"Lazy" layouts are incredibly efficient because they only compose and lay out the items that are currently visible on screen. As the user scrolls, old items are recycled, and new items are composed just in time. This keeps memory usage low and scrolling performance smooth, even with thousands of items.

• LazyColumn: The equivalent of Android's classic RecyclerView. Scrolls vertically.
• LazyRow: Scrolls horizontally.

---

Building a "LazyColumn"

Instead of adding children directly like in a Column, LazyColumn provides a builder block where you define your items. Let's create a simple data source first:

// A simple data class to represent an item in our list
data class User(val id: Int, val name: String)

// A sample list of users
val userList = (1..100).map { User(id = it, name = "User $it") }

@Composable
fun UserListScreen() {
    LazyColumn(
        // Add padding around the entire list
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
        // Add vertical spacing between items
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // The "items" builder takes our list
        items(userList) { user ->
            // This is the composable for a single item in the list
            UserCard(user)
        }
    }
}

@Composable
fun UserCard(user: User) {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        shadowElevation = 4.dp,
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(
            text = user.name,
            modifier = Modifier.padding(16.dp),
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

---

Keys: Helping Compose Be Smarter

You can help Compose be even more efficient by providing a unique and stable key for each item. This helps Compose understand which item is which during recompositions, additions, or removals, preventing unnecessary work. The item's unique ID from your data is a perfect key.

// ... inside LazyColumn
items(
    items = userList,
    key = { user -> user.id } // Provide a stable and unique key
) { user ->
    UserCard(user)
}

---

Key Concepts Recap

• LazyColumn / LazyRow: Highly performant composables for displaying scrollable lists of items.
• Lazy Loading: Only visible items are composed and rendered, saving memory and CPU. This is the core principle.
• items Builder: The DSL block used to define the content of a lazy list from a data source.
• Keys: Providing a unique key for each item is a crucial performance optimization that helps Compose track items efficiently.