Jetpack compoes lazycolumn skipping frames (lagging)

Solution 1:

TLDR: Make sure your new LazyColumn compose element is not within a RelativeLayout or LinearLayout.

After some investigation the solution to this issue for us was the view in which the LazyColumn was constrained.

Our project uses a combination of Jetpack Compose and the older XML layout files. Our new compose elements were embedded within a RelativeLayout of an existing XML file. This was where the problem was. The compose element would be given the entire screen and then the onMeasure function of the compose element was called to re-configure the view and add our bottom nav bar...this onMeasure was called over and over again, which also in the case of a LazyColumn the re-measuring was throwing out the cache as the height had changed.

The solution for us was to change the RelativeLayout that contained both the new compose element and the bottom nav bar and replace it with a ConstraintLayout. This prevented the onMeasure from being called more than twice and gave a massive performance increase.

Solution 2:

This may not work for anyone else but on an earlier version (1.0.0-beta01) I saw a very large improvement in performance when I switched

lazy(items) { item ->
    ...
}

to

items.forEach { item ->
    lazy {
        ...
    }
}

I have no idea why and I'm not sure if this is still the case in later versions but its worth checking. So for the example given in the question, that would mean changing

items(30) {
    ...
}

to

repeat(30) {
    item { 
        ...
    }
}