Hi! I have a LazyColumn and want to change the screen-background-color to that of the item-background at the center-position. It's working fine I'm not sure if I do the calculations at the right place because as soon as I add those calculations I'm triggering infinite recomposition thats why I think I do something wrong. Code-Example in Thread.

You've asked to recompose that content root performing that calculation any time those inputs change so yes, that's likely to result in some recomposition loops. Try performing that calculation in a

derivedStateOf {}

and ensure you only access that derived state object at drawing time, e.g. in a

Modifier.drawBehind

or

Modifier.graphicsLayer {}

block

Hi Adam, thank you so much for your thoughts! Still not getting it. Version 1 (working) but infinite recomposition:

val listState = rememberLazyListState()
val viewPortCenter = ((listState.layoutInfo.viewportEndOffset - listState.layoutInfo.viewportStartOffset) / 2)
val centerItem = listState.layoutInfo.visibleItemsInfo.find { it.offset < viewPortCenter.value && (it.offset + it.size) > viewPortCenter.value }
val centeredBait = baits.find { it.adviceId == centerItem?.key } // I use adviceId as key in lazyColumn
var backgroundColorRes by remember { mutableStateOf(R.color.white) }

LaunchedEffect(centeredBait) {
    backgroundColorRes = centeredBait?.adviceType?.colorRes() ?: R.color.white
}

Version 2 (nothing happens at all):

val viewPortCenter = derivedStateOf {
        ((listState.layoutInfo.viewportEndOffset - listState.layoutInfo.viewportStartOffset) / 2)
}

val centerItem by derivedStateOf {
         listState.layoutInfo.visibleItemsInfo.find { it.offset < viewPortCenter.value && (it.offset + it.size) > viewPortCenter.value }
}

val centeredBait by derivedStateOf {
        baits.find { it.adviceId == centerItem?.key }
}

LaunchedEffect(centeredBait) {
      backgroundColorRes = centeredBait?.adviceType?.colorRes() ?: R.color.white
}

As you can see I'm changing the backgroundColor in LaunchedEffect and set it as background-color to my composable. I'm afraid maybe it's the wrong approach. I'm still getting used to compose.