Performance of LazyColumn with LazyRows inside it

Question

I have a lazy column with lazy rows inside it, like in the image:

I am testing on a 2017 middle-quality phone with Android 9. Release build with R8 enabled.

Scroll performance in rows are pretty good, but in column performance is very low. I am using simplest composables, nothing special.

LazyColumn { 
     items(
          items = rows,
          key = { it.id },
          contentType = { it.type}
     ) { 
          LazyRow {
               items(videos) {
                    Video()
               }
          }
     }
 }

update: this is what Profile GPU rendering speed looks like:

update: this is what profiler system trace looks like. I can't figure out what is causing this huge lag:

update: I used a simple Text instead of Video and still performance is very very poor. I created a sample project.

Any solution on this. I am also facing similar issue. https://stackoverflow.com/questions/75835053/android-compose-lazyrow-inside-lazycolumn-gives-junk-behaviour — nilkash, Mar 27 '23 at 05:18

score 0 · Answer 1 · answered Jan 15 '23 at 08:07

0

I had the same issue when playing with it months ago. I see some coworkers used ImmutableList for the items though and had better luck with that. Might be worth a try - the issue I had is that there was a ton of recomposition happening as well so make sure that is good with a profiler

answered Jan 15 '23 at 08:07

ryankuck

320
3
15

I have to ask a question, why not use a recyclerview for all lists? I think jetpack compose is not suitable for those tasks imho. – Uriel Frankel Jan 15 '23 at 08:28
It’s much nicer to work with in terms of ease of use, flexibility, and extending product features - just have to be careful with the performance here – ryankuck Jan 15 '23 at 09:04
@kuck1 tried [ImmutableList](https://github.com/Kotlin/kotlinx.collections.immutable) but still list is very laggy. – mrzbn Jan 15 '23 at 13:18
1

Could you provide more details of what data is in `rows`? I'm wondering if something in it could be changing for instance causing a lot of recomposition. Another thing to try is use less data to understand what is happening. Like what if you have 5 rows and 3 items in each - does it work then? Then you can try tracing the performance when it gets to a size that is beginning to break: https://developer.android.com/jetpack/compose/performance/tracing Also: https://developer.android.com/jetpack/compose/performance/bestpractices#defer-reads @Uriel may be right if you need to render too much – ryankuck Jan 15 '23 at 16:01
1

Depending on your size needs, another thing I found helped was either using a non lazy Col with lazy rows, or vice versa to make scrolling smooth but start up slightly worse – ryankuck Jan 15 '23 at 16:05

score 0 · Answer 2 · answered Feb 08 '23 at 10:47

0

In my opinion, the sample project with 1000x1000 items seems like overkill. I suggest incorporating pagination as a solution.

Here's an example of pagination in jetpack compose:

https://github.com/MrNtlu/JetpackCompose-Pagination

Also might be useful to review official documents:

Paging library overview

androidx.paging.compose

answered Feb 08 '23 at 10:47

Ali Rezaiyan

3,011
3
16
27

1

I think you're mistaking the purpose of paging library. I think it's goal is to gradually load "data", not ui. – mrzbn Feb 08 '23 at 10:57

Performance of LazyColumn with LazyRows inside it

2 Answers2