Lazy Layouts: Compose's Answer to Efficient Lists

WHY IT EXISTS Displaying a list with thousands of items—like a social media feed or a contact list—is a common requirement. If an app tried to create and draw the UI for every single item at once, it would consume huge amounts of memory and freeze the UI, leading to a crash.

THE MENTAL MODEL Think of a lazy layout as a film strip projector. You only see the one frame currently in the light gate, not the entire reel of film. The layout only composes and renders the few items visible in the viewport, plus a small buffer for smooth scrolling. It's a "just-in-time" UI renderer for lists, replacing the old RecyclerView system.

HOW IT WORKS In Jetpack Compose, you use composables like LazyColumn (for vertical lists) and LazyRow (for horizontal lists). You provide them with your data and a lambda function that defines how to draw a single item. As the user scrolls, Compose intelligently disposes of composables that move off-screen and creates new ones for items that are about to become visible. This recycling mechanism keeps memory usage low and the UI responsive, regardless of the total list size.

WHEN TO USE IT Use lazy layouts for any list that is or could be long. This includes social media feeds, chat histories, large photo galleries, product catalogs, or any screen showing data fetched from a database or network API where the count isn't fixed and small.

WHEN NOT TO USE IT For a small, fixed number of items that will always fit on the screen, a lazy layout is overkill. A simple Column or Row is more efficient for, say, 3-5 static items, as it avoids the setup and management overhead of the lazy mechanism.

ONE CANONICAL EXAMPLE The most common mistake is failing to provide a stable and unique key for each item. Without a key, Compose can't efficiently track items when the list changes, leading to visual bugs and lost state. Always provide a key based on a stable identifier from your data, like an ID from a database. For example: LazyColumn { items(items = myDataList, key = { it.id }) { item -> MyItemRow(item) } }.