撰写：remember() with keys vs. derivedStateOf()

Question

What is the difference between these two approaches?

1. val result = remember(key1, key2) { computeIt(key1, key2) } ( Docs )
2. val result by remember { derivedStateOf { computeIt(key1, key2) } } ( Docs )

Both avoid re-computation if neither key1 nor key2 has changed. The second also avoids re-computations if downstream states are derived, but else, they are identical in their behavior, aren't they?

Answer 1

derivedStateOf {} is used when your state or key is changing more than you want to update your UI . It acts as a buffer for you, buffering out the changes you don't need. That is the primary difference between a keyed remember {} and derivedStateOf {} . With remember {} , you will still recompose as much as your key changes, which isn't a bad thing if that's what you need. If you don't need those recompositions though, that is where derivedStateOf {} comes in.

Take for example showing a button only if the user has scrolled a LazyColumn .

val isVisible = lazyListState.firstVisibleItemIndex > 0

firstVisibleItemIndex will change 0, 1, 2 etc as the user scrolls and cause a recomposition for every time it changes.

I only care about if it's 0 or not 0 and only want to recompose when that condition changes.

derivedStateOf is my buffer, it's buffering out all of those extra state changes I don't need and limiting the recomposition to only when the derivedStateOf changes.

val isVisible = remember { derivedStateOf { lazyListState.firstVisibleItemIndex > 0 } }

For the example given in the question, a remember(key1, key2) {} is the correct API to use there, not derivedStateOf {} because you want your UI to update any time the key changes, there isn't any change to buffer out.

Answer 2

AFAIK there is no difference here. It's just a coincidence that both constructs are doing the same thing here in this context . But, there are differences!

The biggest one is that derivedStateOf is not composable and it does no caching on it's own ( remember does). So derivedStateOf is meant for long running calculations that have to be run only if key changes. Or it can be used to merge multiple states that are not in composable (in custom class for example).

I think the exact explanation is blurred for "outsiders", we need some input from some compose team member here:). My source for the above is this one thread on slack and my own experiments

Answer 3

Another usage for derivedStateOf which is practical is when you need to track changes in one mutableState to have value about another.

For instance an Input layout or number of items that you need to trigger another recomposition after a certain threshold or state.

var numberOfItems by remember {
    mutableStateOf(0)
}

// Use derivedStateOf when a certain state is calculated or derived from other state objects.
    // Using this function guarantees that the calculation will only occur whenever one
    // of the states used in the calculation changes.
    val derivedStateMax by remember {
        derivedStateOf {
            numberOfItems > 5
        }
    }


Column(modifier = Modifier.padding(horizontal = 8.dp)) {

    Row(verticalAlignment = Alignment.CenterVertically) {
        Text(text = "Amount to buy: $numberOfItems", modifier = Modifier.weight(1f))
        IconButton(onClick = { numberOfItems++ }) {
            Icon(imageVector = Icons.Default.Add, contentDescription = "add")
        }
        Spacer(modifier = Modifier.width(4.dp))
        IconButton(onClick = { if (derivedStateMin) numberOfItems-- }) {
            Icon(imageVector = Icons.Default.Remove, contentDescription = "remove")
        }
    }

 
    if (derivedStateMax) {
        Text("You cannot buy more than 5 items", color = Color(0xffE53935))
    }
}

This is whatsapp text input that displays icons based on whether text is empty or not by reading from text

internal fun ChatInput(modifier: Modifier = Modifier, onMessageChange: (String) -> Unit) {

    var input by remember { mutableStateOf(TextFieldValue("")) }
    val textEmpty: Boolean by derivedStateOf { input.text.isEmpty() }

    Row(
        modifier = modifier
            .padding(horizontal = 8.dp, vertical = 6.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.Bottom
    ) {

        ChatTextField(
            modifier = modifier.weight(1f),
            input = input,
            empty = textEmpty,
            onValueChange = {
                input = it
            }
        )

        Spacer(modifier = Modifier.width(6.dp))

        FloatingActionButton(
            modifier = Modifier.size(48.dp),
            backgroundColor = Color(0xff00897B),
            onClick = {
                if (!textEmpty) {
                    onMessageChange(input.text)
                    input = TextFieldValue("")
                }
            }
        ) {
            Icon(
                tint = Color.White,
                imageVector = if (textEmpty) Icons.Filled.Mic else Icons.Filled.Send,
                contentDescription = null
            )
        }
    }
}