This is going to sound very obvious, but I've always struggled with `collectAsState` … Assuming a f...

# compose

[CLOVIS]

This is going to sound very obvious, but I've always struggled with collectAsState …

Assuming a function

fun foo(id: Int) = flow {
    expensiveNetworkRequest(id)
}.flowOn(<http://Dispatchers.IO|Dispatchers.IO>)

What is the correct way to collect it as state?

@Composable
fun Foo(id: Int) {
    // BAD: a new flow is created on each composition, leading to a recomposition loop
    val result1 by foo(id).collectAsState()

    // BAD: seems to also create a recomposition loop
    val result2 by remember(id) { foo(id) }.collectAsState()

    // GOOD?
    val result3 by remember(id) { foo(id).collectAsState() }

    Text(resultX)
}

[Chris Fillmore]

Is there a reason you need to call foo in this Composable? Why not put it in a VM and pass the state in?

[CLOVIS]

ViewModel is Android-only, right?

[Chris Fillmore]

Android has a ViewModel class yes, but the concept applies generally

[CLOVIS]

How would you write this example in a multiplatform way?

[myanmarking]

result2

should be fine. What you say is a ‘recomposition loop’ is probably recomposition due to state emission

[myanmarking]

just log the function and check only one call per id

[myanmarking]

you are remembering the flow as long as it is the same id - and transforming the flow to a State<V>. It is perfectly fine i think

[myanmarking]

if the id changes, you want to collect from the new flow. so remember will call the function again and re-collect

[myanmarking]

from what i understand of your code, thats exactly what you need

[CLOVIS]

That's indeed what I want, but last time I tried it looped infinitely 🤔

[myanmarking]

if you are using ‘result2’, it can only loop ‘indefinitely’ if the key changes indefinitely

[CLOVIS]

I'll try again and check how it works. Thanks

[myanmarking]

if you want to make sure, just copy the ‘collectAsState’ function, and place a log inside the produceState block

[myanmarking]

you will check it is only called once for each id

[leandro]

val result by produceState(initialValue) {
foo(id).collect { value = it }
}

[myanmarking]

Thats what collectAsState do