Jetpack Compose: LazyColumn not updating with MutableList

Question

I am trying to strikethrough a text at the click of a button using Jetpack Compose but the UI is not updating .

I have tried to set a button and on the click of a button, deletedTasks gets updated and if my task is in deletedTasks then it should show up with a strikethrough.

This change only happens manually but I want it to be automatic

I am not sure how to go about this. This is my first time trying Jetpack Compose , any help would be appreciated

@Composable
fun toDoItem(title: String, category: String, task: Task) {

    val rememberTask = remember { mutableStateOf(deletedTasks) }

    Surface(...) {

        Column (...) {

            Row {
                Column (...) {
                    if (!deletedTasks.contains(task)){
                        Text(text = title, style = MaterialTheme.typography.h4.copy(
                            fontWeight = FontWeight.Bold
                        ))
                    } else {
                        Text(text = title, style = MaterialTheme.typography.h4.copy(
                            fontWeight = FontWeight.Bold
                        ), textDecoration = TextDecoration.LineThrough)
                    }
                }
                IconButton(onClick = {
                    rememberTask.value.add(task)
                }) {
                    Icon(imageVector = Icons.Filled.Check, contentDescription =  "Check")
                }
            }
        }
    }
}

@Composable
fun recyclerView(tasks: MutableList<Task>) {
    LazyColumn (modifier =  Modifier.padding(vertical = 10.dp, horizontal = 80.dp)) {
        items(items = tasks) {task ->
            toDoItem(task.title, task.category, task)
        }
    }

}

Answer 1

You are using MutableList<> , which is not recommended for any collection use-cases in Jetpack Compose . I would advice changing it to a SnapshotStateList .

Your recyclerView composable would look like this

@Composable
fun recyclerView(tasks: SnapshotStateList<Task>) { ... }

and somewhere where you set things up (eg ViewModel ) would be like

tasks = mutableStateListOf<Task>( ... )

Using SnapshotStateList will guarantee an "update" or re-composition with any normal list operation you do to it such as,

• list.add( <new task> )
• list.remove( <selected task> )
• list[index] = task.copy() <- idiomatic way of udpating a list

There is also SnapshotStateMap which is for Map key~value pair use-case.

But if you are curious as to how you would update your LazyColumn with an ordinary List , you would have to re-create the entire MutableList<Task> so that it will notify the composer that an update is made because the MutableList<Task> now refers to a new reference of collection of tasks.