Is there a recommended way to merge two MutableStates into one emitting changes from the most recent...

# compose

[colintheshots]

Is there a recommended way to merge two MutableStates into one emitting changes from the most recently updated?

[Rafs]

What you need is derivedStateOf
https://developer.android.com/jetpack/compose/side-effects#derivedstateof

[myanmarking]

I dont see how derivedstate would help in this case. I know you can snapshot both then merge into a new state, but probably there is a better way

[Alex Vanyo]

When you say you want to merge two MutableStates into one, what do you mean exactly?

Do you want to compute some other state based on two input states?

[myanmarking]

I guess he means flow merge behavior like.

[Zach Klippenstein (he/him) [MOD]]

The fact that you’re asking a time-related question (“most recently updated”) about states is a red flag that you might be trying to do something that doesn’t make sense with what “state” really means. Conceptually, states just “are”, they don’t “emit” values at a point in time.

[Zach Klippenstein (he/him) [MOD]]

It sounds like you might be dealing with events, and trying to create a state that is “the most recently emitted event”. But you shouldn’t use MutableState to communicate about events, `Flow`s are much better suited to that.

[colintheshots]

That seems a reasonable point. What I’m aiming to do is to accept updates from a sub-screen. I’m already updating a rememberSaveable mutableState of type TextFieldValue every time the user enters input into a textfield. I also need to be able to open a new composable to allow the user to craft a link and then pass it back into that textfield (inserting it into the text where the TextFieldValue shows the cursor to have been and also updating the cursor position in that TextFieldValue).

[Zach Klippenstein (he/him) [MOD]]

So something like this?

var mainText by remember { mutableStateOf(TextFieldValue("")) }
var editingLink by remember { mutableStateOf(false) }
var linkText by remember { mutableStateOf("") }

if (editingLink) {
  TextField(
    linkText,
    …,
    imeAction = {
      editingLink = false
      mainText = mainText.copy(/* insert linkText at selection position */)
    }
  )
} else {
  TextField(
    mainText,
    …,
  )
  // Some event handler that sets editingLink to true
}

[colintheshots]

Oh, so you’re suggesting putting the link editing sub-screen within the same screen, but swapping out UI. This actually might work great.

I was struggling with going to another screen and passing the data back and forth through Jetpack Compose Navigation routes. It seems like these aren’t intended for larger data objects, like a passage of Markdown text. Even URL-encoding the text was causing crashes because it broke parsing the route if there were encoded newlines. This solution should be far more resilient. Thank you!

[Zach Klippenstein (he/him) [MOD]]

I mean, idk what you want the actual UI to look like. That was just the simplest interpretation i thought of off the top of my head based on the intent you described. If you actually want to back out to another screen, then you’ll have to hoist the state for this stuff up above your individual screens, yea.

[colintheshots]

Yeah, I was dealing with a real mess of state hoisting. Simply swapping the UI in-place may be simpler here even though it adds complexity around a standard Composable which we reuse elsewhere in many places.