Is a good way to use State<Boolean> in view model with Android Compose?

Question

I have read some sample codes for learning Compose.

I find many sample projects use Code A to create a StateFlow in view model, then convert it to State in @Composable function, the UI will be updated automatically when drawerOpen is changed.

1: I think both Code B and Code C can do the same thing, right? Why does many projects seldom to use them?

2: Is Code A a good way ?

3: I needn't to add rememberSaveable for variable drawerOpen in @Composable fun myRoute(...) because view model will store data, right?

Code A

class MainViewModel : ViewModel() {
    private val _drawerShouldBeOpened = MutableStateFlow(false)
    val drawerShouldBeOpened: StateFlow<Boolean> = _drawerShouldBeOpened  
    ...    
}

@Composable
fun myRoute(
    val drawerOpen by MainViewModel.drawerShouldBeOpened.collectAsState()  //Do I need add  rememberSaveable ?
    ...
}

Code B

class MainViewModel : ViewModel() {
    private var _drawerShouldBeOpened = mutableStateOf(false)
    val drawerShouldBeOpened: State<Boolean> = _drawerShouldBeOpened
    ...
}

@Composable
fun myRoute(
   val drawerOpen = MainViewModel.drawerShouldBeOpened  //Do I need add  rememberSaveable ?
   ...
}

Code C

class MainViewModel : ViewModel() {
   private var _drawerShouldBeOpened = false
   val drawerShouldBeOpened: Boolean = _drawerShouldBeOpened
   ...

}

@Composable
fun myRoute(
   val drawerOpen = rememberSaveable { mutableStateOf(MainViewModel.drawerShouldBeOpened)) //Can I remove rememberSaveable ?
   
}

Answer 1

There are multiple questions here.
Let me answer whatever is possible.

1. Where should you use remember / rememberSaveable? (Code A, B, or C)

Only in code C it is required.
(No issues in using in code A and B as well, but no advantages there)

Reason,
In code A and B - the state is maintained in the view model. Hence the value survives recomposition.
But in code C, the state is created and maintained inside the composable. Hence remember is required for the value to survive recomposition.

More details in Docs

2. Why Code C is not used much?

Composable recomposition happens whenever there is a change in state, not the value.

Given below is a simple example to demonstrate the same.

class ToggleViewModel : ViewModel() {
    private val _enabledStateFlow = MutableStateFlow(false)
    val enabledStateFlow: StateFlow<Boolean> = _enabledStateFlow

    private val _enabledState = mutableStateOf(false)
    val enabledState: State<Boolean> = _enabledState

    private var _enabled = false
    val enabled: Boolean = _enabled

    fun setEnabledStateFlow(isEnabled: Boolean) {
        _enabledStateFlow.value = isEnabled
    }

    fun setEnabledState(isEnabled: Boolean) {
        _enabledState.value = isEnabled
    }

    fun setEnabled(isEnabled: Boolean) {
        _enabled = isEnabled
    }
}

@Composable
fun BooleanToggle(
    viewmodel: ToggleViewModel = ToggleViewModel(),
) {
    val enabledStateFlow by viewmodel.enabledStateFlow.collectAsState()
    val enabledState by viewmodel.enabledState
    val enabled by rememberSaveable {
        mutableStateOf(viewmodel.enabled)
    }

    Column {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = if (enabledStateFlow) {
                "Enabled"
            } else {
                "Disabled"
            })
            Button(onClick = { viewmodel.setEnabledStateFlow(!enabledStateFlow) }) {
                Text("Toggle State Flow")
            }
        }

        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = if (enabledState) {
                "Enabled"
            } else {
                "Disabled"
            })
            Button(onClick = { viewmodel.setEnabledState(!enabledState) }) {
                Text("Toggle State")
            }
        }

        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = if (enabled) {
                "Enabled"
            } else {
                "Disabled"
            })
            Button(onClick = { viewmodel.setEnabled(!enabled) }) {
                Text("Toggle Value")
            }
        }
    }
}

You can see that the third text will NOT update on clicking the button.
The reason is that the mutable state inside the composable was created using an initial value from the view model data. But further updates to that data will not be reflected in the composable.

To get updates, we have to use reactive data like Flow, LiveData, State, and their variants.

3. Using StateFlow vs State.

From the docs, you can see that compose supports Flow, LiveData and RxJava.

You can see in the usage that we are using collectAsState() for StateFlow. The method converts StateFlow to State. So both can be used.

Use Flow if the layers beyond ViewModel (like repo) are the data sources and they use Flow data type.
Else MutableState should be fine.