A modern programming language that makes developers happier.

kotlinlang

:wave:  I am refactoring part of our app to use Compose, and trying to reuse our MVI viewmodels which a property of `StateFlow` of different states. e.g.
```sealed class MyState{
   object Loading…
   class ShowList(val list:List&lt;String&gt; ) …
   class Itemselected( val item:String)...
   class Error( val message:String )…
}```
and then on the content I want to display something like
```    @Composable
    fun MyPage(viewModel: MyViewModel) {
        val state: MyState by viewModel.getStateFlow()
            .collectAsState(initial = MyState.Loading)
        Column {
            Header("Home")
            PageBody(state) 
        }
    }
@Composable
fun PageBody(state: ServiceHubHomeState) {
    when (state) {
        MyState.Loading -&gt; Header("Loading")
        is MyState.ShowList -&gt;
            ListHub(serviceItems = state.list) 
        is MyState.ItemSelected -&gt; { // do something else
        }
    }
}```
So now, when I use .collectAsState, everything works all-right, *BUT*,
when I have already published a value of  Showlist, and a list is rendered,
if a new state comes, e.g ItemSelected of course the list is cleaned up.
_*My question is*_, how do I keep the already rendered list between the next state transitions?
I am sure I have to keep the state somewhere but cannot see it :disappointed:

`Loading` is a State, but `ShowList` and `ItemSelected` are not, they are events. You are mixing states and events. Your state flow should contain two states: `Loading` and `List`, and `ItemSelected` should be emitted by another event flow.

the ItemSelected is an example, but let’s say I want to keep the list already there, and additionally display something more, how do I keep the already rendered list?

In a fragment, when observed like this, a new state of course wouldn’t trigger the UI rendering again, but just adapt to do what is the change.

In compose everything would render again, so I think the whole MVI rendering is not exactly going to work in compose compared to simple android views.

The problem here is how you should organize your state. When you do it correctly, there will naturally be no problem like this. If your `ItemSelected` or whatever do not overwrite `List` state, it is surely not a state, or at least not a state at the same level with `List`.

The presented `MyState` sealed class means that only one possible variant can be displayed at a time. If you need to display multiple things, they all should be part of the same state variant:

```sealed class MyState {
    object Loading
    class List
    class ListWithItemSelected
    class Error
}```
or
```sealed class MyState {
    object Loading
    class List(val list: SomeType, val selectedItem: SomeOtherType? = null)
    class Error
}```

this is what I was aiming to do but thought of a way to avoid it.
Thank you all!