computedStateOf と derivedStateOf の使い分け

Jetpack Compose 1.13 で追加される ComputedState (computedStateOf) は DerivedState (derivedStateOf) と何が違うのかとその使い分けについて。

ComputedState と DerivedState の違い

ComputedState (computedStateOf)

キャッシュの仕組みがなく、読み込まれるたびに computedStateOf の中の処理を実行します。

DerivedState (derivedStateOf)

処理の結果をキャッシュして、状態が変化するまで再利用します。
キャッシュの更新や State の監視に伴うオーバーヘッドがあります。

使い分け

基本的には ComputedState をデフォルトで使うことが推奨されます。
単純な計算やキャッシュ管理のオーバーヘッドよりも計算自体が軽い場合は ComputedState を使う方が望ましいです。
逆に計算自体が非常に負荷の高い場合であったり、計算時に大きなメモリ割り当てが発生する場合は DerivedState を使う方が望ましいです。

@Composable
fun ScrollToTopButton(scrollState: ScrollState) {
    val showButton by remember { computedStateOf { scrollState.value > 0 } }

    if (showButton) {
        FloatingActionButton(onClick = { }) {
            ...
        }
    }
}

---

key 付き SideEffect ↔︎ LaunchedEffect のように、これまで使っていた実装でより軽量な関数が登場しているので、適切に使い分けてパフォーマンスがいい実装をしましょう。

リンク