When our team made the jump to Jetpack Compose, one thing immediately stood out - the simplicity of handling lists. No more wrestling with complex adapters, tricky cell updates, or manual diffing; just drop your items into a LazyColumn, add keys, and voilà - instant scrolling magic! But, as you might have guessed, reality isn't always that straightforward. In this article, I'll share how you can strategically transfer your hard earned RecyclerView optimization expertise directly into LazyColumn, ensuring maximum performance from day one. So how exactly do RecyclerView’s battle-tested optimizations map onto LazyColumn’s new playing field? Let’s break it down technique by technique, examining what's directly transferable, what's improved, and what requires a fresh approach to achieve optimal Compose performance. Identity & Content Checks: From DiffUtil to Compose Keys and Immutable Models Identity & Content Checks: From DiffUtil to Compose Keys and Immutable Models In RecyclerView, optimizing the calculation of differences between lists relies heavily on three essential methods: areItemsTheSame(oldItem, newItem) – Checks if two items represent the same logical entity.


areContentsTheSame(oldItem, newItem) – Determines if the item's content has changed, prompting a UI refresh if necessary.


detectMoves – An advanced optimization that speeds up diff calculations, especially beneficial when you know your dataset involves item movements. areItemsTheSame(oldItem, newItem) – Checks if two items represent the same logical entity. areItemsTheSame(oldItem, newItem) – Checks if two items represent the same logical entity. areItemsTheSame(oldItem, newItem) areContentsTheSame(oldItem, newItem) – Determines if the item's content has changed, prompting a UI refresh if necessary. areContentsTheSame(oldItem, newItem) – Determines if the item's content has changed, prompting a UI refresh if necessary. areContentsTheSame(oldItem, newItem) detectMoves – An advanced optimization that speeds up diff calculations, especially beneficial when you know your dataset involves item movements. detectMoves – An advanced optimization that speeds up diff calculations, especially beneficial when you know your dataset involves item movements. detectMoves Jetpack Compose handles these same concepts elegantly. To inform Compose how to efficiently track individual items, you provide a stable key for each one: LazyColumn {
    items(
        items = users,
        key = { user -> user.id } // equivalent to RecyclerView's areItemsTheSame
    ) { user ->
        UserCard(user = user)
    }
} LazyColumn {
    items(
        items = users,
        key = { user -> user.id } // equivalent to RecyclerView's areItemsTheSame
    ) { user ->
        UserCard(user = user)
    }
} This key ensures that Compose can track the identity of items across recompositions - just like areItemsTheSame. key areItemsTheSame Handling content updates (areContentsTheSame) is a bit different in Compose, as it leverages internal recomposition strategies. A good rule of thumb here is to always prefer immutable UI models - achieved easily by using the @Immutable annotation or defining data classes with val fields exclusively. Furthermore, starting from Compose compiler 2.x (bundled with Kotlin 2.0.20), Strong Skipping mode is enabled by default, providing automatic optimization and removing the need for manual handling of immutable collections. areContentsTheSame @Immutable Asynchronous Text Layout: From PrecomputedText to TextMeasurer Asynchronous Text Layout: From PrecomputedText to TextMeasurer RecyclerView veterans relied on PrecomputedText to shift expensive text-layout work onto a background thread before the view holder ever appeared on the screen. Jetpack Compose tackles this same challenge effectively through built-in paragraph caching and the TextMeasurer API. Let’s map these familiar techniques onto Compose's new terrain step by step 1. Paragraph caching (built-in optimization) Every time you emit a Text composable, Compose caches a fully-laid-out Paragraph within the current composition. As long as the text content, styling, density, and locale remain unchanged, Compose reuses this cached paragraph, avoiding unnecessary layout computations. This effectively reduces overhead for most intra-viewport updates and provides immediate performance gains without additional effort. Paragraph 2. When it is time for big guns: Using TextMeasurer For heavyweight or complex text scenarios (e.g., long paragraphs, variable fonts, or custom canvas drawing) where even occasional on-scroll layout recalculations are unacceptable, leverage the TextMeasurer API - think of it as the Compose counterpart to PrecomputedText.create(). TextMeasurer API PrecomputedText.create() Benefits of using TextMeasurer: Precise Layout Control: Pre-measuring text off-screen provides exact item heights before composable placement, preventing layout shifts during scrolling.
Dynamic Overflow Detection: Access properties like layoutResult.hasVisualOverflow to conditionally render UI elements such as "Read more" indicators.
Enhanced Scroll Performance: By knowing exact item dimensions beforehand, LazyColumn calculates scroll positions more efficiently, ensuring smoother scrolling. Precise Layout Control: Pre-measuring text off-screen provides exact item heights before composable placement, preventing layout shifts during scrolling. Precise Layout Control Dynamic Overflow Detection: Access properties like layoutResult.hasVisualOverflow to conditionally render UI elements such as "Read more" indicators. Dynamic Overflow Detection layoutResult.hasVisualOverflow Enhanced Scroll Performance: By knowing exact item dimensions beforehand, LazyColumn calculates scroll positions more efficiently, ensuring smoother scrolling. Enhanced Scroll Performance LazyColumn However, introducing TextMeasurer increases complexity. You must: TextMeasurer Manage recomposition carefully, especially during configuration changes (e.g., font scale, screen orientation), requiring items to be re-measured appropriately.
Implement caching to avoid redundant measurements of identical content, preserving performance. Manage recomposition carefully, especially during configuration changes (e.g., font scale, screen orientation), requiring items to be re-measured appropriately. Implement caching to avoid redundant measurements of identical content, preserving performance. @Composable
fun MeasuredMessageList(messages: List<String>) {
    val textMeasurer = rememberTextMeasurer()
    val screenWidthPx = with(LocalDensity.current) {
        (LocalConfiguration.current.screenWidthDp.dp - 32.dp).toPx().toInt()
    }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
    ) {
        items(messages) { message ->
            val layoutResult = textMeasurer.measure(
                text = AnnotatedString(message),
                style = TextStyle(fontSize = 16.sp),
                maxLines = 3,
                overflow = TextOverflow.Ellipsis,
                constraints = Constraints(
                    maxWidth = screenWidthPx
                )
            )
            
            val itemHeight = with(LocalDensity.current) {
                layoutResult.size.height.toDp() + 16.dp 
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(itemHeight)
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            ) {
                Text(
                    text = message,
                    style = TextStyle(fontSize = 16.sp),
                    maxLines = 3,
                    overflow = TextOverflow.Ellipsis
                )
            }
        }
    }
} @Composable
fun MeasuredMessageList(messages: List<String>) {
    val textMeasurer = rememberTextMeasurer()
    val screenWidthPx = with(LocalDensity.current) {
        (LocalConfiguration.current.screenWidthDp.dp - 32.dp).toPx().toInt()
    }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
    ) {
        items(messages) { message ->
            val layoutResult = textMeasurer.measure(
                text = AnnotatedString(message),
                style = TextStyle(fontSize = 16.sp),
                maxLines = 3,
                overflow = TextOverflow.Ellipsis,
                constraints = Constraints(
                    maxWidth = screenWidthPx
                )
            )
            
            val itemHeight = with(LocalDensity.current) {
                layoutResult.size.height.toDp() + 16.dp 
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(itemHeight)
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            ) {
                Text(
                    text = message,
                    style = TextStyle(fontSize = 16.sp),
                    maxLines = 3,
                    overflow = TextOverflow.Ellipsis
                )
            }
        }
    }
} TextMeasurer is particularly useful for: Lists with variable-length text content
Chat applications or message lists
Article or comment feeds
Any scenario where text length significantly varies between items Lists with variable-length text content Chat applications or message lists Article or comment feeds Any scenario where text length significantly varies between items Importance of contentType Importance of contentType In RecyclerView, developers utilize view types (getItemViewType()) to efficiently handle multiple item layouts within a single list. Jetpack Compose introduces the equivalent optimization through the contentType parameter in LazyColumn. getItemViewType() contentType LazyColumn Here's a way of how you'd express the RecyclerView view types in Jetpack Compose: // RecyclerView
override fun getItemViewType(position: Int): Int {
    return when (items[position]) {
        is TextMessage -> VIEW_TYPE_TEXT
        is ImageMessage -> VIEW_TYPE_IMAGE
        is VideoMessage -> VIEW_TYPE_VIDEO
        else -> VIEW_TYPE_UNKNOWN
    }
}

// LazyColumn
LazyColumn {
        items(
            items = messages,
            key = { message -> message.id },
            contentType = { message -> 
                when (message) {
                    is Message.TextMessage -> "text"
                    is Message.ImageMessage -> "image"
                    is Message.VideoMessage -> "video"
                }
            }
        ) { message ->
            MessageItem(message)
        } // RecyclerView
override fun getItemViewType(position: Int): Int {
    return when (items[position]) {
        is TextMessage -> VIEW_TYPE_TEXT
        is ImageMessage -> VIEW_TYPE_IMAGE
        is VideoMessage -> VIEW_TYPE_VIDEO
        else -> VIEW_TYPE_UNKNOWN
    }
}

// LazyColumn
LazyColumn {
        items(
            items = messages,
            key = { message -> message.id },
            contentType = { message -> 
                when (message) {
                    is Message.TextMessage -> "text"
                    is Message.ImageMessage -> "image"
                    is Message.VideoMessage -> "video"
                }
            }
        ) { message ->
            MessageItem(message)
        } Why it matters: While Compose allows omission of the contentType parameter, leaving it out negatively impacts performance, particularly for lists with mixed item types. Compose maintains a limited composition cache per contentType, enabling it to efficiently reuse existing compositions for items of the same visual structure without expensive rebuilds. Without specifying distinct contentTypes, all items default to a single type, rapidly exhausting Compose’s internal cache. This forces frequent recompositions as users scroll, significantly increasing CPU load and potentially introducing noticeable scrolling lag. contentType contentType For optimal performance in lists with heterogeneous content, always specify the appropriate contentType to match your data structure. contentType Nested List Prefetching: From initialPrefetchItemCount to nestedPrefetchItemCount Nested List Prefetching: From initialPrefetchItemCount to nestedPrefetchItemCount initialPrefetchItemCount nestedPrefetchItemCount When developing apps with nested scrolling lists - such as vertical feeds containing horizontal carousels - optimizing prefetching is crucial for maintaining a smooth user experience. In traditional RecyclerView setups, we rely on setInitialPrefetchItemCount to preload off-screen items. Jetpack Compose provides a direct analogue through the experimental LazyListPrefetchStrategy API, specifically its nestedPrefetchItemCount parameter. setInitialPrefetchItemCount LazyListPrefetchStrategy nestedPrefetchItemCount Here's how you implement prefetching in a nested Compose list scenario: @OptIn(ExperimentalFoundationApi::class)
@Composable
fun ShowCarousels(sections: List<Section>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(sections, key = { it.id }) { section ->
            val rowState = rememberLazyListState(
                prefetchStrategy = LazyListPrefetchStrategy(
                    nestedPrefetchItemCount = 6)
            )

            Text(
                text = section.title,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(start = 16.dp, top = 8.dp)
            )

            LazyRow(
                state = rowState,
                contentPadding = PaddingValues(horizontal = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                items(
                    items = section.cards,
                    key = { it.id },
                    contentType = { "card" }
                ) { card ->
                    CardItem(card)
                }
            }
        }
    }
} @OptIn(ExperimentalFoundationApi::class)
@Composable
fun ShowCarousels(sections: List<Section>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(sections, key = { it.id }) { section ->
            val rowState = rememberLazyListState(
                prefetchStrategy = LazyListPrefetchStrategy(
                    nestedPrefetchItemCount = 6)
            )

            Text(
                text = section.title,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(start = 16.dp, top = 8.dp)
            )

            LazyRow(
                state = rowState,
                contentPadding = PaddingValues(horizontal = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                items(
                    items = section.cards,
                    key = { it.id },
                    contentType = { "card" }
                ) { card ->
                    CardItem(card)
                }
            }
        }
    }
} Common pitfall here (at least, the one that I saw with my own eyes) - sometimes developers set LazyListPrefetchStrategy to parent list and not to the nested ones, which, obviously, gains no effect. Always ensure you apply nestedPrefetchItemCount to the nested, inner scrolling list state to achieve the intended optimization. LazyListPrefetchStrategy nestedPrefetchItemCount Be mindful that aggressive prefetch settings can significantly inflate Compose’s composition cache. On memory-constrained devices, overly large prefetch counts can push your app toward OOM crashes. Always profile memory usage carefully after adjusting your prefetch budgets - especially if targeting low-end hardware. Bonus part - animating your lists Bonus part - animating your lists And finally, let's talk about animations. Compose 1.7 makes adding smooth item animations surprisingly straightforward especially compared to custom RecyclerView ItemAnimators. Instead of manually orchestrating animations, simply use Modifier.animateItem() with concise specs for fades and movements: Modifier.animateItem() Modifier.animateItem(
    fadeInSpec = tween(200),
    fadeOutSpec = tween(120),
    placementSpec = spring(stiffness = Spring.StiffnessMediumLow)
) Modifier.animateItem(
    fadeInSpec = tween(200),
    fadeOutSpec = tween(120),
    placementSpec = spring(stiffness = Spring.StiffnessMediumLow)
) This reduces complexity, enabling you to easily deliver polished and engaging UIs. Conclusion Conclusion Jetpack Compose transforms Android UI development, simplifying many complexities that have challenged RecyclerView users. However, maximizing Compose's potential still demands strategic insight and careful application of optimization techniques. By leveraging keys for identity checks, using immutable models to optimize recompositions, mastering the TextMeasurer API for efficient text handling, and applying correct prefetch strategies for nested lists, your performance skills from RecyclerView will significantly enhance your Compose applications. Embrace these methods, and you'll ensure your UI remains fluid, responsive, and delightful for users - proving once again that foundational performance strategies never go out of style, they simply evolve.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This story contains new, firsthand information uncovered by the writer.

Immutable

How We Cut Chat UI Frame Time by 8% with One Jetpack Compose Optimization

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

From RecyclerView to LazyColumn: A Performance Optimization Playbook for Jetpack Compose

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How We Cut Chat UI Frame Time by 8% with One Jetpack Compose Optimization

Comparing XML and Compose Rendering Speed at Deep and Wide Nesting

Compose vs XML in Android Development: Choosing the Right UI Toolkit

Creating a Grouped Bar Graph using Jetpack Compose

Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

How We Cut Chat UI Frame Time by 8% with One Jetpack Compose Optimization

Comparing XML and Compose Rendering Speed at Deep and Wide Nesting

Compose vs XML in Android Development: Choosing the Right UI Toolkit

Creating a Grouped Bar Graph using Jetpack Compose

Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps