Hi everyone, Just would like to clarify something about `derivedStateOf` . In the official Documen...

# compose

[Archie]

Hi everyone,

Just would like to clarify something about derivedStateOf .

In the official Documentation here: https://developer.android.com/jetpack/compose/side-effects

There is this sample code:

@Composable
fun TodoList(
    highPriorityKeywords: List<String> = listOf("Review", "Unblock", "Compose")
) {
    val todoTasks = remember { mutableStateListOf<String>() }

    // Calculate high priority tasks only when the todoTasks or
    // highPriorityKeywords change, not on every recomposition
    val highPriorityTasks by remember(todoTasks, highPriorityKeywords) {
        derivedStateOf {
            todoTasks.filter { it.containsWord(highPriorityKeywords) }
        }
    }

    Box(Modifier.fillMaxSize()) {
        LazyColumn {
            items(highPriorityTasks) { /* ... */ }
            items(todoTasks) { /* ... */ }
        }
        /* Rest of the UI where users can add elements to the list */
    }
}

Wouldn’t the same thing would be achieve even without the derivedStateOf?

Like:

@Composable
fun TodoList(
    highPriorityKeywords: List<String> = listOf("Review", "Unblock", "Compose")
) {
    val todoTasks = remember { mutableStateListOf<String>() }

    // Calculate high priority tasks only when the todoTasks or
    // highPriorityKeywords change, not on every recomposition
    val highPriorityTasks by remember(todoTasks.value, highPriorityKeywords) {
        todoTasks.filter { it.containsWord(highPriorityKeywords) }
    }

    Box(Modifier.fillMaxSize()) {
        LazyColumn {
            items(highPriorityTasks) { /* ... */ }
            items(todoTasks) { /* ... */ }
        }
        /* Rest of the UI where users can add elements to the list */
    }
}

Wouldn’t this do the exact same thing?

[Dominaezzz]

derivedStateOf can potentially reduce the number of recompositions since it's value is calculated and subscribed to lazily.

[Archie]

Hi @Dominaezzz, Thanks for the reply ❤️. So essentially, the first block of code only recomposes the LazyColumn but the second one, recomposes the whole TodoList(..) composable right? Thats the main difference?

[Dominaezzz]

That's about right yh.

[Archie]

I’m still confuse though, if

val todoTasks = remember { mutableStateListOf<String>() }

updates its value, wouldn’t that recompose the whole TodoList(…) anyway?

[Archie]

Oh now I get it. The main difference is that derivedStateOf converts it into a State<T> .

[Dominaezzz]

Exactly!

[lhwdev]

And derivedStateOf can be used outside composable functions.

But I wonder why remember key is needed to remember derivedStateOf, isn't it sufficient to write val highPriorityTasks by remember { derivedStateOf { ... } } as derivedStateOf tracks its read by itself?

[mcpiroman]

And is the `remember`even needed? Wouldn't `derivedStateOf`cache it's output if the inputs don't change just like `remember`would?

[lhwdev]

Remember is needed, or when recomposing DerivedState is unnecessarily recreated and values can be recalculated.
Note that derivedStateOf is similar to mutableStateOf, can be used outside Composable.