LazyColumn doing infinite number of recompositions (Jetpack Compose) - kotlin

Question

I want to display a list of items using LazyColumn. I wrote the needed code but when I ran the app I observed that the UI is very laggy. I put some Logs to find out where the problem may be and I discovered that the LazyColumn inifinitely recomposes the items. I don't know why LazyColumn behaves like it did
list composable:
fun listOfReceivers(
receivers: List<ReceivedPingItem>,
) {
if (receivers.isNotEmpty()) {
val listState = rememberLazyListState()
val firstVisibleIndex = listState.firstVisibleItemIndex
val lastVisibleItemIndex = listState.layoutInfo.visibleItemsInfo.lastIndex + listState.firstVisibleItemIndex
if (listState.isScrolledToTheEnd()) {
Log.d("*****", "Scrolled to the End")
viewModel.onRecyclerViewScrolledToLast()
}
//LazyColumn -> equivalent of the RecyclerView
LazyColumn(
state = listState,
contentPadding = PaddingValues(horizontal = 15.dp, vertical = 15.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
items(receivers) { receiverItem ->
Log.d("*****", "ADDED $receiverItem")
ReceiversListItem(
receiver = receiverItem,
modifier = Modifier.fillMaxWidth()
)
}
}
// AppViewState
if (firstVisibleIndex == 0) {
appViewState.viewState = ViewState.ReceivedPingsViewState(firstVisibleIndex)
} else {
appViewState.viewState = ViewState.DefaultViewState
}
// Seen status check
if (firstVisibleIndex != -1 && lastVisibleItemIndex != -1) {
viewModel.onRecyclerViewScrolledSetViewed(
receivers.subList(
firstVisibleIndex,
lastVisibleItemIndex
)
)
}
}
else{
EmptyPingsScreen()
}
}

Answer 1

Due to this video - youtu.be/EOQB8PTLkpY?t=284 , i did smthn like this, and it works perfectly:
#Composable
fun ListOfReceivers(
receivers: List<ReceivedPingItem>,
) {
if (receivers.isNotEmpty()) {
val listState = rememberLazyListState()
val derivedListState by remember { derivedStateOf { listState.isScrolledToTheEnd() } }
if (derivedListState) {
viewModel.onRecyclerViewScrolledToLast()
}
// LazyColumn -> equivalent of the RecyclerView
LazyColumn(
state = listState,
contentPadding = PaddingValues(horizontal = 15.dp, vertical = 15.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
items(receivers) { receiverItem ->
Log.d("*****", "ADDED $receiverItem")
ReceiversListItem(
receiver = receiverItem,
modifier = Modifier.fillMaxWidth()
)
}
}
// derivedStateOf - prevents infinite recomposition
val visibleItemsCount by remember { derivedStateOf { listState.layoutInfo.visibleItemsInfo.size } }
val firstVisibleItemIndex = listState.firstVisibleItemIndex
val lastVisibleItemIndex = firstVisibleItemIndex + visibleItemsCount - 1
// AppViewState
if (firstVisibleItemIndex == 0) {
appViewState.viewState = ViewState.ReceivedPingsViewState(firstVisibleItemIndex)
} else {
appViewState.viewState = ViewState.DefaultViewState
}