Hello, I have a list of instruments in which each of them subscribes to a websocket so they get upda...

# compose

[nuhkoca]

Hello, I have a list of instruments in which each of them subscribes to a websocket so they get updated frequently. How would you observe such a frequently updating set of items with Compose?

I use subscribeAsState to collect the list but whenever there is an update in any element in the list, all item gets recomposed over and over so I am having flickers in the UI. I also pass a key per element down to LazyList

val instruments by instrumentList.subscribeAsState(initial = emptyList())

GIF in the thread

[nuhkoca]

[nuhkoca]

val instruments by instrumentList.subscribeAsState(initial = emptyList())

LazyColumn(
                state = rememberLazyListState(),
                modifier = Modifier.fillMaxSize()
            ) {
                items(instruments, key = { it.isin }) {
                    Box(Modifier.animateItemPlacement()) {
                        InstrumentView(instrument = it)
                    }
                }
            }

@Composable
private fun InstrumentView(
    instrument: PortfolioPositionsInstrumentData,
) {
    TRListItemLargePortfolioMetric(
      ...
    )

[Zach Klippenstein (he/him) [MOD]]

Recomposition doesn't cause flicker on its own. It looks like some state is being changed or reset that shouldn't be when that recomposition happens.

[nuhkoca]

Thanks yeah found the culprit, now it is working as expected