ConcurrentModificationException during mutableStateListOf reverse

Question

itemList.reverse()

itemList is mutableStateListOf() object inside viewModel, above line throws below given exception:

java.util.ConcurrentModificationException
    at androidx.compose.runtime.snapshots.StateListIterator.validateModification(SnapshotStateList.kt:278)
    at androidx.compose.runtime.snapshots.StateListIterator.set(SnapshotStateList.kt:271)
    at java.util.Collections.reverse(Collections.java:435)
    at kotlin.collections.CollectionsKt___CollectionsJvmKt.reverse(_CollectionsJvm.kt:43)
    at in.rachika.composetest2.Tests.LazyColumnHeaderTest$MainScreenWithChildList$1$2.invoke(LazyColumnHeaderTest.kt:114)
    at in.rachika.composetest2.Tests.LazyColumnHeaderTest$MainScreenWithChildList$1$2.invoke(LazyColumnHeaderTest.kt:111)
    

I am unable to figure out how to reverse or shuffle a mutableStateListOf() Object

reverse() works well in isolated situation but my LazyColumn has stickyHeader() and SwipeToDismiss(), don't know may be that is creating problem.

Model

data class TestModel(
val isHeader: Boolean,
val UniqueKey: UUID,
val GroupId: UUID,
val GroupName: String,
val ItemName: String,
val children: MutableList<TestModel>,
var isExpanded: Boolean = false)

ViewModel

class TestViewModel: ViewModel() {
var itemList = mutableStateListOf<TestModel>()

init {
    viewModelScope.launch(Dispatchers.IO){
        loadList()
    }
}

private fun loadList() {
    for(i in 0..20){
        val groupName = "${i + 1}. STICKY HEADER #"
        val groupUUID = UUID.randomUUID()

        val childList = mutableListOf<TestModel>()
        for(t in 0..Random.nextInt(10, 20)){
            childList.add(TestModel(
                isHeader = false,
                UniqueKey = UUID.randomUUID(),
                GroupId = groupUUID,
                GroupName = groupName,
                ItemName = "${t + 1}. This is an CHILD ITEM... #${i + 1} - ${Random.nextInt(1001, 5001)}",
                children = ArrayList()
            )
            )
        }

        viewModelScope.launch(Dispatchers.Main){
            itemList.add(TestModel(
                isHeader = true,
                UniqueKey = UUID.randomUUID(),
                GroupId = groupUUID,
                GroupName = groupName,
                ItemName = "",
                children = childList
            ))
        }
    }
}

fun addChildren(testModel: TestModel, onCompleted: (startIndex: Int) -> Unit){
    if(testModel.children.count() > 0){
        var index = itemList.indexOf(testModel)
        testModel.children.forEach { tItem ->
            itemList.add(index + 1, tItem)
            index++
        }
        testModel.apply {
            isExpanded = true
            children.clear()
        }
        onCompleted(index)
    }
}

fun removeChildren(testModel: TestModel, onCompleted: (startIndex: Int) -> Unit){
    val startIndex = itemList.indexOf(testModel) + 1
    while (startIndex < itemList.size && !itemList[startIndex].isHeader){
        testModel.children.add(itemList.removeAt(startIndex))
    }
    if(testModel.children.count() > 0){
        testModel.isExpanded = false
        onCompleted(startIndex - 1)
    }
}}

Composable functions

@Composable
fun MainScreenWithChildList(testViewModel: TestViewModel = viewModel()) {
    val lazyColumnState = rememberLazyListState()
    var reverseList by remember { mutableStateOf(false) }
    if (reverseList) {
        LaunchedEffect(Unit) {
            delay(1000)
            testViewModel.itemList.reverse()
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(
            state = lazyColumnState,
            modifier = Modifier.fillMaxSize()
        ) {
            testViewModel.itemList.forEach { testModel ->
                when (testModel.isHeader) {
                    true -> {
                        stickyHeader(key = testModel.UniqueKey) {
                            HeaderLayout(testModel = testModel) { testModel ->
                                if (testModel.isExpanded) {
                                    testViewModel.removeChildren(testModel) {}
                                } else {
                                    testViewModel.addChildren(testModel) {}
                                }
                            }
                        }
                    }
                    false -> {
                        item(key = testModel.UniqueKey) {
                            val dismissState = rememberDismissState()
                            if (dismissState.isDismissed(DismissDirection.EndToStart) || dismissState.isDismissed(
                                    DismissDirection.StartToEnd
                                )
                            ) {
                                if (dismissState.currentValue != DismissValue.Default) {
                                    LaunchedEffect(Unit) {
                                        dismissState.reset()
                                    }
                                }
                            }

                            SwipeToDismiss(
                                state = dismissState,
                                directions = setOf(
                                    DismissDirection.StartToEnd,
                                    DismissDirection.EndToStart
                                ),
                                dismissThresholds = { direction ->
                                    FractionalThreshold(if (direction == DismissDirection.StartToEnd || direction == DismissDirection.EndToStart) 0.25f else 0.5f)
                                },
                                background = { SwipedItemBackground(dismissState = dismissState) },
                                dismissContent = {
                                    ItemScreen(
                                        modifier = Modifier
                                            .fillMaxWidth()
                                            .animateItemPlacement(animationSpec = tween(600)),
                                        elevation = if (dismissState.dismissDirection != null) 16 else 0,
                                        testModel = testModel
                                    )
                                }
                            )
                        }
                    }
                }
            }
        }

        Button(
            onClick = {
                reverseList = true
            },
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {
            Text(text = "Reverse")
        }
    }
}

@Composable
fun ItemScreen(modifier: Modifier, elevation: Int, testModel: TestModel) {
    Card(
        modifier = modifier,
        //elevation = animateDpAsState(elevation.dp).value
    ) {
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            text = testModel.ItemName + "  ="
        )
    }
}

@Composable
fun SwipedItemBackground(dismissState: DismissState) {
    val direction = dismissState.dismissDirection ?: return
    val color by animateColorAsState(
        targetValue = when (dismissState.targetValue) {
            DismissValue.Default -> Color.LightGray
            DismissValue.DismissedToEnd -> Color.Green
            DismissValue.DismissedToStart -> Color.Red
        }
    )
    val icon = when (direction) {
        DismissDirection.StartToEnd -> Icons.Default.Done
        DismissDirection.EndToStart -> Icons.Default.Delete
    }
    val scale by animateFloatAsState(
        if (dismissState.targetValue == DismissValue.Default) 0.75f else 1.5f
    )
    val alignment = when (direction) {
        DismissDirection.StartToEnd -> Alignment.CenterStart
        DismissDirection.EndToStart -> Alignment.CenterEnd
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color)
            .padding(start = 12.dp, end = 12.dp),
        contentAlignment = alignment
    ) {
        Icon(icon, contentDescription = "Icon", modifier = Modifier.scale(scale))
    }
}

@Composable
fun HeaderLayout(testModel: TestModel, onExpandClicked: (testModel: TestModel) -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(
                color = Color.LightGray,
                shape = RoundedCornerShape(8.dp)
            )
            .padding(horizontal = 32.dp, vertical = 16.dp),
        horizontalArrangement = SpaceBetween

    ) {
        Text(text = testModel.GroupName)
        TextButton(onClick = { onExpandClicked(testModel) }) {
            Text(text = if (testModel.isExpanded) "Collapse" else "Expand")
        }
    }
}

Above is the complete reproducible code. Please copy paste and try

Answer 1

The reverse seems to work fine when the list size is small, but crashes when the number of items is large. I was able to reproduce this with the following MRE:

val list = remember { (1..100).toList().toMutableStateList() }
LaunchedEffect(Unit) {
    delay(1.seconds)
    list.reverse()
}
Text(list.toList().toString())

And reported this to compose issue tracker, star it so it can be solved faster.

Until then, you can reverse it manually as follows:

val newItems = list.reversed()
list.clear()
list.addAll(newItems)