I'm still really confuse on where to properly plac...

# compose

[Archie]

I'm still really confuse on where to properly place state in compose. Please help me out.

Lets say we have a SignUp Form that span multiple screen...

UserInfoScreen -> ContactInfoScreen -> OtherInfoScreen -> ...

My problem is that I am not sure where to place my state. I could place my state at a top level composable like:

SignUpFlow  {
    val myStateHolder = remember { myState }
    Crossfade(myStateHolder.currentScreen) {
        UserInfo -> UserInfoScreen(myState)
        ContactInfo -> ContactInfoScreen(myState)
        OtherInfo -> OtherInfoScreen(myState)
        ...
    }   
}

But then when I go:
UserInfoScreen -> ContactInfoScreen -> OtherInfoScreen -> (press back) ContactInfoScreen -> OtherInfoScreen

If I typed on OtherInfoScreen and since that state is stored above OtherInfoScreen going back to the screen preserves the values I typed.

On the other hand if I place my state within the screens such as:

UserInfoScreen {
    val userInfoState = remember { userInfoState }
    ... // MY UI
}

This solves the problem above, but in turn it doesn't really keep the state since when going through the screens of the flow, the Composable would be removed together with its state.

Please help. How exactly do we deal with this in compose?

The only way I could think of making this work is doing the first one and manually clearing the state when "pooping" the related screen.