Hello everyone the below code is recomposing ui for every it kotlinlang #compose

Hello everyone, the below code is recomposing ui for every item in the list on scroll. This is being done even when there is no change is any of the items of list and number of items in list is 100 is there any way to avoid this

Copy code

ScrollableColumn() {
                LazyColumnFor(items = list) {item ->
                    getSampleDataRow(data = item)
                }
            }

for every scroll , getSampleDataRow(data = item) is getting called for all 100 items in the list . Can somebody please point out what am I doing wrong here.

Copy code

data class SampleData(val url : String, val id: Long, val value : String){
    override fun equals(other: Any?): Boolean {
        if(!(other is SampleData)) return false
        return id.equals((other as SampleData).id)
    }
}

Namig Tahmazli

09/21/2020, 6:52 AM

Copy code

getSampleDataRow(data = item)

As far as I understood this is expected behavior. LazyColumnFor does not lay out all of children at once but only the amount that can be displayed to user. When you scroll since

item

becomes different

getSampleDataRow(data = item)

gets recomposed again.

Yann Badoual

09/21/2020, 7:00 AM

Try without nesting

LazyColumnFor

inside

ScrollableColumn

. You shouldn't have to do this. Do instead:

Copy code

LazyColumn {
   items(list) { item ->
      getSampleData(item)
   }
}

🙌 1

Not sure it'll change the behavior, but it should improve stuff like scroll/fling.

Timo Drick

09/21/2020, 9:02 AM

LazyColumnFor should only recompose the new childs on scroll. So already composed childs should stay untouched.

Prashant Priyadarshi

09/21/2020, 10:30 AM

@Yann Badoual you are right . I didnot needed a ScrollableColumn. Since lazyCOlumnFor is a recycler view so it already has a scrollbar of its own. changing to below code worked

Copy code

LazyColumnFor(items = list) {item ->
                getSampleDataRow(data = item)
            }

@Namig Tahmazli, @Timo Drick .. after removing the extra ScrollableColumn.. I was able to get the desired behavior as both of you stated. Thanks.

👍 1

Yann Badoual

09/21/2020, 10:32 AM

Yes, and if you need additional items not from the list, you can use the snippet I sent above

👍 1

3 Views