Hi, I'm trying to use LazyColumn but I have a weird problem, I have a @Composable function that takes a

channel

class which has a

message

property which is a

MutableMap<Long, Message>

then I show the list of the messages using the LazyColumn, for that I have no problem. But when I create my

channel

, I add to it 20 messages by doing this

for (i in 0..20) {
    channel.messages.put(i, Message("test $i"))
}

But in result I get 2-3 messages only, and the numbers are random, sometimes it's 0, 5 and 14, sometimes 5 and 20, and it's very weird and I can't find a way to make it working, what am I doing wrong ? I'm using the 1.0.0-alpha4-build331 version.

MutableMap... Never use mutable classes with Compose. Use

mutableStateOf()

or

mutableStateMapOf()

How ?

If I'm reading correctly, you're generating messages in some background coroutine or thread then trying to send them on a coroutines

Channel

to your UI to be displayed – is that correct?

channel is an instance of a class

Channel

not related to coroutines

Ah ok. So what Philip meant is that mutable types that aren't built to work with compose won't notify compose about updates, which will cause the bugs you noticed. Compose provides special collection types that will correctly update compositions, so you could use one of these for

messages

by creating the map with

mutableStateMapOf

instead of

mutableMapOf

. Alternatively,

messages

could be a

MutableState

object that holds an immutable map (i.e.

mapOf

), where you're sending a new map in every time you want to add a message.

Oh okay I see

I still have the problem using

mutableSteMapOf

:(

var message by remember { mutableStateOf(Message("$text 0", user)) }
	
	for (i in 0..20) {
		message = Message("$text $i", user)
		channel.messages[message.id] = message
	}

This is a bit smelly – creating a mutable state, then mutating that state multiple times in the same composable in a loop. It looks like

message

isn't actually state at all and shouldn't be a mutable state or remembered. Is that the only place where you're actually adding items to the message list?

okay thanks I'll fix these and retry

I think some of those state issues when seeding the list might be doing weird things. If it still happens after changing that code happy to take another look

I still have the problem

So another issue is that every time that

App

composable recomposes, you're gonna add another 30 items to the list, but that doesn't explain the ordering…

oh yes you're right

wait, this is a map. I thought mutableStateMapOf preserved insertion order, so i would think the ordering would match iteration order. But since order is significant, and it is semantically an ordered list of items, it would probably be better to use a list instead (i.e.

mutableStateListOf

)

the order is not very important I guess, I can still re-order them in the LazyColumn no ?

So you're still missing items, not just seeing them out-of-order?

yes

Are you sure your IDs are unique?

and I have all my messages in order

I see you're generating IDs like this:

val now = Clock.System.now()
		id = "${now.toEpochMilliseconds()}${now.nanosecondsOfSecond.toString().takeLast(3)}".toLong()

But i'm not sure if

Clock.System.now()

will give you nanosecond accuracy – if it doesn't, then you're probably generating duplicate IDs.

yes you're right, but I didn't find another way to generate very sure ids without invoking some non-secure randomness (I'm not very good at security and pseudo-random number generation also)

How to generate IDs is a whole other discussion, but i'd recommend finding another approach so they are guaranteed unique. But also using a list data structure if the order is meaningful (which it usually is in a UI).

yeah okay I see, thanks for the tips !