Use lazycolumn jetpack compose lag more than use recycleview

Question

I just learned jetpack compose and I switched from recycle to lazy column but when I do it it lags much more than recycle

after adding about 100 items to the application the app is lagging, is there any way to reduce the lag for the lazy column? I have set the id for the item and used R8 to build this is code:https://github.com/trongan123/TODOAPP

 val tabs: MutableList<TabItem> = ArrayList<TabItem>().toMutableList()
tabs += TabItem("All") {
    AllItemScreen(
        listAll, openUpdateItemScreen = {
            openUpdateItemScreen()
        }, viewModel = viewModel
    )
}
tabs += TabItem("Pending") {
    PendingItemScreen(listAll.filter { it.status.equals("pending") }, openUpdateItemScreen = {
        openUpdateItemScreen()
    }, viewModel = viewModel)
}
tabs += TabItem("Completed") {
    CompletedItemScreen(
        listAll.filter { it.status.equals("completed") },
        openUpdateItemScreen = {
            openUpdateItemScreen()
        }, viewModel = viewModel
    )
}
val pagerState = rememberPagerState()
Scaffold(
    floatingActionButton = {
        FloatingActionButton(
            onClick = { openAddItemScreen() }
        ) {
            Icon(Icons.Filled.Add, "")
        }
    }
) { padding ->
    val textState = remember { mutableStateOf(TextFieldValue("")) }
    Column(
        modifier = Modifier
            .padding(padding)
    ) {
        SearchView(state = textState, viewModel)
        Spacer(modifier = Modifier.size(16.dp))
        Tabs(
            tabs = tabs, pagerState = pagerState,
            viewModel = viewModel
        )
        TabsContent(tabs = tabs, pagerState = pagerState)
    }
}

AllItemScreen

 Column(
    modifier = Modifier
        .fillMaxSize()

) {
    LazyColumn() {

        items(listAll) { i ->
            ItemList(
                i,
                openUpdateItemScreen = {
                    openUpdateItemScreen()
                }, viewModel
            )
        }
    }
}

ItemList

 val isChecked = remember { mutableStateOf(false) }
Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp)
        .clickable {
            if (isChecked.value == true) {
                isChecked.value = false
                viewModel.setClearAll(i.id, false)
                viewModel.setCheckData(i.id, false)
            } else {
                isChecked.value = true
                viewModel.setClearAll(i.id, true)
                viewModel.setCheckData(i.id, true)
            }
        },
    elevation = 5.dp
) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
        Spacer(modifier = Modifier.size(16.dp))
        Row {
            val check: List<Int>? = viewModel.getListMutableCheck().value as List<Int>
            if (check != null) {
                isChecked.value = check.contains(i.id)
            }
            Checkbox(
                checked = isChecked.value,
                onCheckedChange = {
                    isChecked.value = it
                    viewModel.setClearAll(i.id, it)
                    viewModel.setCheckData(i.id, it)
                }
            )
            Spacer(modifier = Modifier.size(16.dp))
            if (!isChecked.value) {
                Text(
                    i.title, modifier = Modifier
                        .padding(top = 10.dp)
                )
            } else Text(
                i.title,
                modifier = Modifier
                    .padding(top = 10.dp),
                style = TextStyle(textDecoration = TextDecoration.LineThrough)
            )
            Spacer(
                Modifier
                    .weight(1f)
                    .fillMaxHeight()
            )
            Image(painter = painterResource(id = R.drawable.ellipsis),
                contentDescription = null,

                modifier = Modifier
                    .clickable {
                        todoItem = i
                        openUpdateItemScreen()
                    }
                    .size(30.dp))
            Spacer(modifier = Modifier.size(10.dp))
        }

    }
}

Critic

Please post the relevant code as part of the post. Posting link to the app's GitHub page is not enough since we wont know which part of the code has the issue. – Buckner

Answer 1

Jetpack Compose does a lot in Debug mode. you can just simply test your code on Release mode to see power of Jetpack Compose

Tainataint

but when i test code on release mode it not faster than recyclerview – Stedman

@ÂnTrọng RecyclerView and LazyColmn both could be good or bad inperformance. it depends on implementation. judging by your code i think maybe your implementation is not so good and your code may produce performance issues. – Tainataint