Does anyone knows how `item{}` works in LazyColumn? I’m having a weird issue with it If i have 2 `it...

# compose

[Tin Tran]

Does anyone knows how item{} works in LazyColumn? I’m having a weird issue with it
If i have 2 item block inside a LazyColumn when i scroll pass the all the elements in the first item block and scroll back to it, all the composable in the first item block got recomposed even if the data haven’t changed.

[Tin Tran]

Here’s an example

LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = 48.dp)
        ) {
            item {
                Account()
                Lessons()
                Schedule()

            }
            item {
                LazyColumn(
                    modifier =             Modifier.height(500.dp)
                ) {
                    items(lessons) { lesson: Lesson ->
                        LessonScheduleView(
                            item = lesson,
                            modifier = Modifier
                                .fillMaxWidth()
                        )
                    }
                }
                NewsList()
                Products()
                FollowUs()
            }
        }

[Tin Tran]

whenever I scroll pass Schedule() and scroll back again all Account() , Lessons() and Schedule() get recomposed

[Tin Tran]

But if I do this it worked fine

LazyColumn {
     item {
                Account()
                Lessons()
                Schedule()
                LazyColumn(
                    modifier =             Modifier.height(500.dp)
                ) {
                    items(lessons) { lesson: Lesson ->
                        LessonScheduleView(
                            item = lesson,
                            modifier = Modifier
                                .fillMaxWidth()
                        )
                    }
                }
                NewsList()
                Products()
                FollowUs()
            }
}

[Andrey Kulikov]

that is how LazyColumn works in general. lazy means here that we only compose items which are visible. so once some item is not visible anymore it is disposed and then composed again when visible

[Tin Tran]

It’s seems a bit laggy when recomposing those 3 composable

Screen_Recording_20210310-112116_golftec.mp4

[Tin Tran]

and it gets worse when i split each of the composable into it’s own item{} block

[Andrey Kulikov]

LazyColumn is basically a RecyclerView. there you would see similar issues. And yes, performance for such complex things is not yet final, we are looking on ways to improve it

[Andrey Kulikov]

please also consider testing the performance on the release builds. debug builds are not representing the real performance

[Adam Powell]

Can you share the code for those particular composables that are slow to compose? Account/Lessons/Schedule?

[Tin Tran]

Sure! Here u are. I copy all the code into one file so it’ll be a little bit messy 😄

sample.kt

[Adam Powell]

thanks!

[Andrey Kulikov]

Thanks! I filed a bug for us to investigate: https://issuetracker.google.com/issues/182381949

[Tin Tran]

Thank you!