LazyVerticalGrid scrolling is laggy

Question

In the not Jetpack Compose version of my app I was able to create a ScrollView. This works great and doesnt lag on older devices. However when trying to replicate my ScrollView in Jetpack Compose. On older devices (Running android 10 and 11) they seem to lag really hard and make it look janky. And it works just fine on Android 13 phones with good hardware. But it just can't be this laggy just because of Jetpack Compose..

Some details about whats in my scroll in Jetpack Compose: Boxes that get created by a list containing 50 items, in this box is an image and a text. These boxes can be clicked like a checkbox. See code below:

Bar(Box = List(50) { (it + 1).toString() })

@Composable
fun Bar(
    Box: List<String>
) {
    val selectedChipIndices = remember { mutableStateListOf<Boolean>() }
    val boxSelect: ArrayList<Int> = ArrayList()
    repeat(Box.size) {
        selectedChipIndices.add(false)
    }

LazyVerticalGrid(
    columns = GridCells.Fixed(4),
    userScrollEnabled = true,
    modifier = Modifier
        .height(300.dp)
        .fillMaxWidth()
) {
    itemsIndexed(Box) { index, id ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .size(width = 100.dp, height = 70.dp)
                .padding(start = 10.dp, end = 5.dp, top = 10.dp, bottom = 5.dp)
                .clickable {
                    selectedChipIndices[index] = !selectedChipIndices[index]
                    if(selectedChipIndices[index]){
                        boxSelect.add(index)
                    } else {
                        boxSelect.remove(index)
                    }
                }
                .clip(RoundedCornerShape(10.dp))
                .background(
                    if (selectedChipIndices[index]) selectblue else grey
                )
                .padding(start = 5.dp, end = 10.dp, top = 5.dp, bottom = 5.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.icon),
                contentDescription = "icon",
                contentScale = ContentScale.FillHeight,
                modifier = Modifier
                    .align(Alignment.CenterStart)
            )
            // ID
            Text(
                text = id,
                color = Color.White,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .align(Alignment.CenterEnd)
            )
        }
    }
}

}

Answer 1

jatpack compose has a lag in the debug version and it will be better if you release the application, you can also add a key to the items in LazyGried, which has a great effect on the scrolling speed.