Recomposition every time on lazy column jetpack compose

Question

I need help with a full recomposition in every row of my lazy column when they are in or out of the screen. The performance is not good at all. Its a simple lazy list with pagination on a lazy row First the Pager on my viewmodel

val result = Pager(
        PagingConfig(pageSize = PAGE_SIZE, enablePlaceholders = ENABLE_PLACEHOLDERS)
    ) {
        repository.getRooms()
    }.flow
        .cachedIn(viewModelScope)

Now my fragment onCreatedView method:

    return ComposeView(requireContext()).apply {
                setContent {
                    CurrentTheme(provideCurrentTheme()) {
                        RoomsCFragmentScreen(
                            ...
                            pager = viewModel.result
                            ...
                        )
                    }
    
                }
            }

Now on my screen view:

Scaffold()
 { paddingValues ->
        RoomsList(
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = paddingValues.calculateBottomPadding()),
            pager = pager,
            ...
        )
    }

Now the RoomList:

val roomListItems: LazyPagingItems<RoomItemView> = pager.collectAsLazyPagingItems()

    LazyColumn(
        modifier = modifier,
        state = listState,
    ) {
        items(items = roomListItems, key = { it.room!!.id }) { item ->
            item?.let {
                Surface() {
                    RoomItem(
                        roomItemView = it,
                        ...
                    )
                }
            }
        }
    }

Now all the components that are on my RoomItem:

@Composable
fun RoomItem(
    dateFormatter: DateFormatter.Formatter,
    userId: String,
    roomItemView: RoomItemView,
    loadDraft: (roomId: String) -> String
) {
    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceEvenly,
        ) {
            Avatar(roomItemView = roomItemView)

            CenterContent(
                roomItemView = roomItemView,
                dateFormatter = dateFormatter,
                userId = userId,
                loadDraft = loadDraft
            )
        }

        Divider(
            modifier = Modifier
                .padding(top = 8.dp, end = 12.dp, start = 85.dp),
            color = MaterialTheme.colors.secondary
        )
    }
}

@Composable
fun CenterContent(
    roomItemView: RoomItemView,
    dateFormatter: DateFormatter.Formatter,
    userId: String,
    loadDraft: (roomId: String) -> String
) {
    Column(
        modifier = Modifier
            .fillMaxWidth(),
    ) {
        CenterContentTop(roomItemView, dateFormatter)

        CenterContentBottom(roomItemView, userId, loadDraft = loadDraft)
    }
}

@Composable
fun CenterContentTop(roomItemView: RoomItemView, dateFormatter: DateFormatter.Formatter) {
    Box(modifier = Modifier.padding(end = 12.dp, bottom = 5.dp)) {
        RoomItemTitle(
            roomItemView = roomItemView,
            dateFormatter = dateFormatter
        )
    }
}

@Composable
fun CenterContentBottom(
    roomItemView: RoomItemView,
    userId: String,
    loadDraft: (roomId: String) -> String
) {
    Box(modifier = Modifier.padding(end = 12.dp)) {
        LastMessage(roomItemView = roomItemView, userId = userId, loadDraft = loadDraft)
    }
}

Answer 1

Create an instance of MutableList that is observable and can be snapshot.

var yourMutableList = mutableStateListOf<YourList>()

LazyColumn {
    items(yourMutableList) {
    }
}