Composable Not Collecting Updated Value in StateFlow

Question

I have a form screen written in Compose where the user can fill out some TextFields and submit it. If they press the submit button before filling out the fields, the supporting text for the empty TextFields will change to say "Required".

Required text on empty fields

To do this, I've created a ViewState that includes a showRequired field:

data class ViewState(
    showRequired: Boolean = false,
    // other fields
)

In my view model, I create a MutableStateFlow with the ViewState as its default value:

private val _viewState: MutableStateFlow<ViewState> = MutableStateFlow(ViewState())
val viewState: StateFlow<viewState> = _viewState.asStateFlow()

To have the composable show the required message, I update the view state like this:

fun onSubmitClicked(form: Form) {
    if (areRequiredFieldsMissing(form)) {
        _viewState.update { it.copy(showRequired = true) }
    }
}

In my composable, I'm collecting that flow with collectAsStateWithLifecycle() and then checking if showRequired = true before showing the message:

val viewState = viewModel.viewState.collectAsStateWithLifecycle()

if (viewState.value.showRequired) {
    // set supportingText = Required
}

When I click the submit button, the message shows as expected. However, if I leave this screen and then come back to it, the required message shows by default instead of being hidden. I thought I could fix this by updating the view state when the back button is pressed to set showRequired = false:

// in my view model
fun onBackPressed() {
    _viewState.update { it.copy(showRequired = false) }
}

However this doesn't fix anything. When I come back to the form screen, the required message still shows by default. When I debug the composable, the value collected for showRequired is still true. Why doesn't updating it to false work correctly, but updating it to true when clicking the submit button does? I think I'm misunderstanding how StateFlow works but I'm not sure what to try.

EDIT: I resolved this by resetting my ViewState when exiting the screen so that showRequired is reset to false, instead of just updating it.

_viewState.value = ViewState()

Are you using the same ViewModel for both screens? How is `onBackPressed` called? — Abhimanyu, Jun 14 '23 at 12:25
Yes I'm using the same ViewModel (confirmed it's the same instance). My form page uses a `Scaffold` with a `TopAppBar` that has a navigation icon with an `onClick` specified. When I click the navigation icon, the view model's `onBackPressed()` is invoked. — pjp94, Jun 14 '23 at 18:45
Hi, check if my answer solves your problem. Kindly accept & upvote the answer if it does. — Abhimanyu, Jun 15 '23 at 01:31

score 0 · Answer 1 · answered Jun 14 '23 at 22:16

showRequired should be a separate SharedFlow shouldn't keep in state as StateFlow, showing a message when there is an empty field on submit is an event not a state, you should show it only once. StateFlow is keeping its value and when you come back from a different screen recomposition occurs and

val viewState = viewModel.viewState.collectAsStateWithLifecycle()

if (viewState.value.showRequired) {
    // show message
}

this code block gets executed again, and because showRequired in state is set true message will be shown.

You should remove showRequired from your viewState

private val _formWarningEvent = MutableSharedFlow<Boolean>()
val formWarningEvent = _formWarningEvent.asSharedFlow()

in Composable

LaunchedEffect(Unit) {
    viewModel.formWarningEvent.onEach { show -> // can register lifecycle or use collect etc.
        if (show) // show message
    }
}

Sorry I didn't explain what I'm doing correctly. I'm not just showing a one-off thing like a Toast message. The input fields are `TextField`s, and I change their supporting text to say "Required" when the submit button is clicked but they're empty. In this case, that would be a state change, so `StateFlow` is appropriate, right? I've updated the post with a screenshot showing what it looks like. — pjp94, Jun 15 '23 at 00:04

score 0 · Answer 2 · answered Jun 15 '23 at 01:29

This is my understanding of the use case.
Add a comment if it is not exactly the same.

You have a screen with multiple TextFields and a Submit Button. On clicking the submit button, the app navigates to a different screen.
The states are maintained in a shared ViewModel between screens. The error message is to be shown only after the user clicks on the button, but validation fails.

My first suggestion would be to use screen level ViewModel instead of shared ViewModel which automatically clears the states when it is removed.

But, there may be scenarios where that is not possible. In that case, you can try this,

ViewModel

// To store the state of the TextField input
private val _textFieldState: MutableStateFlow<String> = MutableStateFlow("")
val textFieldState: StateFlow<String> = _viewState.asStateFlow()

// To store the state of the CTA button click
private val _ctaClicked: MutableStateFlow<Boolean> = MutableStateFlow(false)
val ctaClicked: StateFlow<Boolean> = _viewState.asStateFlow()

// To store the state of the CTA button click
private val textFieldErrorState: MutableStateFlow<String?> = combine(
    textFieldState,
    ctaClicked,
) { textFieldState, ctaClicked, ->
    if (ctaClicked && textFieldState.isEmpty()) {
        "Required"
    } else {
        null
    }
}

We are using combine from Kotlin to listen to both the TextField input state as well as the CTA button click state.

You should reset the ctaClicked when navigating away from the screen.

Comment with more details, if this is not working for your use-case.

I need the view model to be shared because it emits a snackbar message that the previous screen needs to collect and show. I fixed this by resetting my `ViewState` when leaving the screen so that `showRequired` gets reset to false. — pjp94, Jun 15 '23 at 03:17

Composable Not Collecting Updated Value in StateFlow

2 Answers2