【Jetpack Compose】mutableStateOf(list) と mutableStateListOf() の違いと使い分け

Jetpack Composeでリストを扱う際、多くの開発者が最初にぶつかる壁が
「mutableStateOf(list) と mutableStateListOf() どっちを使えばいいの？」
という疑問です。

この記事では、両者の型、構造、そして「なぜあの書き方は動かないのか？」という落とし穴についてスッキリ整理して解説します。

型の構造：箱ごと入れ替えるスタイル

mutableStateOf は「値（value）」そのものを監視します。リストを扱う場合、中身は不変（Immutable）な List であることが前提です。

型 :
MutableState<List<T>>

変更方法:
state.value = state.value + "A"

リストの中身をいじるのではなく、「新しいリストを作成して、Stateという箱に入れ直す」ことでComposeに通知します。

型の構造：中身の動きを監視するスタイル

mutableStateListOf は、それ自体が MutableList のように振る舞い、内部の要素が追加・削除されたことを Compose に直接伝えます。

型 :
SnapshotStateList<T>

変更方法:
list.add("A"), list.remove("B")

リスト自体を再代入する必要はありません。add や remove を実行するだけで、Compose が自動的に変更を検知して再描画してくれます。

mutableStateOf(list) を使うケース

主に UI State をデータクラスで一括管理する場合です。

・ Flow から combine して State を生成する
・ data class を用いた一方向データフロー（UDF）設計


data class MyUiState(
    val items: List<String> = emptyList()
)

// ViewModelなどで管理
var uiState by mutableStateOf(MyUiState())

mutableStateListOf() を使うケース

リストそのものが「動的な操作の主体」である場合です。

・ Navigation3 の rememberNavBackStack()
・要素の追加・削除が頻繁に発生する編集画面やスタック操作

基本的には
・「UI全体の状態管理なら mutableStateOf」
・「リスト個別の動的操作なら mutableStateListOf」
と使い分けるのがスマートです。

#iOS | #Android Fashion News