LazyColumn java.lang.IllegalStateException: replace() called on item that was not placed

Issue

I'm getting a crash when scrolling a srollable (meaning enough content to scroll) LazyColumn. It happens only when the content inside LazyColumn is more complex - meaning it's not an element but a layout. Elements such as simple Text(text=index.toString) works just fine, even when there's like 200 of such elements.

Other strange thing about this issue is the fact that I have very similiar screen to the code that is crashing, yet that screen is not crashing. Downgrading libraries to stable versions (outside of material3 because older version is crashing on BottomSheet) hasn't helped me either.

Currently my critical code is this:

LazyColumn(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                stickyHeader {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceEvenly,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Spacer(modifier = Modifier.weight(0.05f))
                        BrandHeaderButton(
                            modifier = (if (facts.size > 0) {
                                Modifier.weight(0.45f)
                            } else Modifier.requiredSize(0.dp))
                                .zIndex(100f)
                                .animateContentSize(),
                            text = stringResource(id = R.string.facts_list_generate_questions)
                        ) {
                            //controller.onGenerateQuestionsRequest()
                        }
                        Spacer(
                            modifier = (if(facts.size > 0) {
                                Modifier.weight(0.05f)
                            }else Modifier.requiredSize(0.dp))
                                .animateContentSize()
                        )
                        BrandHeaderButton(
                            modifier = Modifier
                                .zIndex(100f)
                                .weight(0.45f),
                            text = stringResource(id = R.string.facts_list_add_new)
                        ) {
                            facts.add(FactIO())
                        }
                        Spacer(modifier = Modifier.weight(0.05f))
                    }
                }
                itemsIndexed(facts) { index, fact ->
                    (interactiveStates.getOrNull(index) ?: rememberInteractiveCardState()).let { state ->
                        LaunchedEffect(state.isChecked.value) {
                            if(state.isChecked.value) {
                                selectedFactsUids.add(fact.uid)
                            }else selectedFactsUids.remove(fact.uid)
                        }
                        FactCard(
                            data = fact,
                            state = (interactiveStates.getOrNull(index) ?: rememberInteractiveCardState()),
                            requestDataSave = requestFactSave
                        )
                    }
                }
            }

Solution

After debugging for a UNCOMFORTABLY LONG TIME I found a way around it, by wrapping the LazyColumn inside

ConstraintLayout(modifier = Modifier.fillMaxSize()) { LazyColumn(...) {...} }

So while I have a solution, I'm looking for reason WHY. Because I simply can't believe Compose libraries are this terribly built, so that most people just wait for newer version that'll fix their issue. I can't really imagine building whole product on Jetpack Compose and facing such critical issues.

Answered By - Jakub Kostka