Performance is bad when using HorizontalPager + LazyVerticalGrid in Jetpack Compose

Question

I setup a really small project for testing purposes and I see a lot of janky frames when swiping the horizontalPager: https://github.com/DaFaack/ComposePerformanceTest

I build in release mode with R8 enabled. What am I doing wrong?

When I record the trace and view it in perfetto it shows me a lot of jank:

The same setup in XML with ViewPager + RecyclerView is running smoothly

I tried generating baseline profiles but see no difference, still janky frames

Answer 1

rather than using:

LazyVerticalGrid(columns = GridCells.Fixed(5), content = {
        items(40) {
            ImageItem(imageUrl, name)
        }
    })

use:

(0..40).forEach { it ->
    item(key: /*Create an constant key for each item*/) {
        ImageItem(imageUrl, name)
    }
}

I have read somewhere that using foreach on lists greatly increases performance along with custom keys. Additionally, try to use fastForEach in any possible scenario.