Jetpack Compose の Side-effect を使いこなす / DroidKaigi 2023

Transcript

1. Jetpack Compose の Side-effect を使いこなす Kenji Abe - 2023/09/15
2. 自己紹介 • Kenji Abe • Google Developers Expert for Android, Kotlin • DeNA Co., Ltd. • X: @STAR_ZERO • Bluesky: @star-zero.com 2
3. Side-effect? (副作用) 3
4. Side effect (副作用) • 関数や操作などが結果を返すなどの主となる効果以外の効果 ◦ グローバル変数の変更 ◦ I/O操作 • ほかのSide effectを起こす関数の呼び出し • 実行順によって結果が変わる可能性がある • デバッグが困難になる • テストが難しくなる 4
5. Composeにおける Side effect 5
6. 副作用とは、 コンポーズ可能な関数の範囲外で 発生するアプリの状態の変化を 指します。 6 https://developer.android.com/jetpack/compose/side-effects?hl=ja
7. ComposeにおけるSide effect • Composable関数はSide effectがないようにすることが理想 • 予測できないRecomposition ◦ 実行順 ◦ スキップ ◦ 破棄 7
8. Side effectが必要な状況 8
9. Side effectが必要な状況 • スナックバーを表示する • 1 回限りのイベントをトリガーする • 特定の状態で別の画面に移動する • などなど 9 https://developer.android.com/jetpack/compose/side-effects?hl=ja
10. Side effectが必要な状況 • スナックバーを表示する • 1 回限りのイベントをトリガーする • 特定の状態で別の画面に移動する • などなど 10 https://developer.android.com/jetpack/compose/side-effects?hl=ja Side effectを安全に 実行する必要がある
11. Side effect APIs • LaunchedEffect • rememberCoroutineScope • DisposableEffect • rememberUpdatedState • SideEffect • derivedStateOf • produceState • snapshotFlow 11 https://developer.android.com/jetpack/compose/side-effects?hl=ja
12. LaunchedEffect 12
13. LauchedEffect var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } }
14. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect
15. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect 後述
16. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect Coroutines
17. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect Snackbarを表示
18. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect フラグを戻して、次回も表示できるように
19. LaunchedEffectの 引数について 19
20. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect Key: 値が変わったときに起動される
21. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect false 1
22. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect false 1 初回は必ず起動する 2
23. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect Recomposition
24. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect false のまま 3
25. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect false のまま 3 Key が変更されてないので 実行されない 4
26. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect showSnackbar = true
27. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect false → true 5
28. var showSnackbar by remember { mutableStateOf(false) } LaunchedEffect(showSnackbar) { if (showSnackbar) { snackbarHostState.showSnackbar( message = "OK" ) showSnackbar = false } } LauchedEffect false → true 5 Key が変更されたので 実行される 6
29. いろいろなKey 29
30. LaunchedEffect(Unit) { // ... } LauchedEffect ずっと同じ値 最初の1回だけ実行
31. LaunchedEffect(key1, key2, key3) { // ... } LauchedEffect 複数のKey どれかが変わったら実行する
32. LaunchedEffect のCoroutines 32
33. LaunchedEffectのCoroutines • キャンセルするタイミング ◦ keyが変わってLauchedEffectが再起動するとき ◦ CompositionからLeaveするとき 33 https://developer.android.com/jetpack/compose/lifecycle
34. LaunchedEffect(key) { delay(5000) Timber.d("OK") } LauchedEffect
35. LaunchedEffect(key) { delay(5000) Timber.d("OK") } LauchedEffect 5秒経過前にkeyが変わると ログが出力されずに最初から数え直し
36. LaunchedEffect(key) { delay(5000) Timber.d("OK") } LauchedEffect 5秒経過前にCompositionからLeaveすると ログが出力されずに終了
37. rememberCoroutineScope 37
38. rememberCoroutineScope val scope = rememberCoroutineScope() Button( onClick = { scope.launch { snackbarHostState.showSnackbar("Hello, World") } } ) { Text(text = "Show Snackbar") }
39. val scope = rememberCoroutineScope() Button( onClick = { scope.launch { snackbarHostState.showSnackbar("Hello, World") } } ) { Text(text = "Show Snackbar") } rememberCoroutineScope CoroutinesScope取得
40. val scope = rememberCoroutineScope() Button( onClick = { scope.launch { snackbarHostState.showSnackbar("Hello, World") } } ) { Text(text = "Show Snackbar") } rememberCoroutineScope ScopeからCoroutines起動
41. val scope = rememberCoroutineScope() Button( onClick = { scope.launch { snackbarHostState.showSnackbar("Hello, World") } } ) { Text(text = "Show Snackbar") } rememberCoroutineScope Composition から Leave するときにキャンセル
42. DisposableEffect 45
43. DisposableEffect val lifecycleOwner = LocalLifecycleOwner.current DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { // ... } } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } }
44. val lifecycleOwner = LocalLifecycleOwner.current DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { // ... } } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } DisposableEffect LifecycleOwner取得
45. val lifecycleOwner = LocalLifecycleOwner.current DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { // ... } } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } DisposableEffect 引数は LauchedEffect と同じ感じ
46. val lifecycleOwner = LocalLifecycleOwner.current DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { // ... } } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } DisposableEffect Coroutinesじゃない
47. val lifecycleOwner = LocalLifecycleOwner.current DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { // ... } } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } DisposableEffect Lifecycle監視の処理
48. val lifecycleOwner = LocalLifecycleOwner.current DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { // ... } } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } DisposableEffect クリーンアップの処理
49. DisposableEffect の処理の流れ 52
50. DisposableEffect var flag by remember { mutableStateOf(false) } DisposableEffect(flag) { // ... onDispose { // ... } }
51. var flag by remember { mutableStateOf(false) } DisposableEffect(flag) { // ... onDispose { // ... } } DisposableEffect false 1
52. var flag by remember { mutableStateOf(false) } DisposableEffect(flag) { // ... onDispose { // ... } } DisposableEffect false 1 実行 2
53. var flag by remember { mutableStateOf(false) } DisposableEffect(flag) { // ... onDispose { // ... } } DisposableEffect false → true 3
54. var flag by remember { mutableStateOf(false) } DisposableEffect(flag) { // ... onDispose { // ... } } DisposableEffect 実行 4
55. var flag by remember { mutableStateOf(false) } DisposableEffect(flag) { // ... onDispose { // ... } } DisposableEffect 実行 5
56. 59 LaunchedEffect DisposableEffect • クリーンアップできない • Coroutinesで起動 ◦ 若干のオーバーヘッド • onDisposeによるクリーンアップ • Coroutinesではない
57. rememberUpdatedState 60
58. rememberUpdatedState を使わなかった場合 61
59. var count by remember { mutableIntStateOf(0) } Button(onClick = { count++ }) { Text(text = "Increment: $count") } Content(count = count) rememberUpdatedState
60. var count by remember { mutableIntStateOf(0) } Button(onClick = { count++ }) { Text(text = "Increment: $count") } Content(count = count) rememberUpdatedState 単純なインクリメント処理
61. var count by remember { mutableIntStateOf(0) } Button(onClick = { count++ }) { Text(text = "Increment: $count") } Content(count = count) rememberUpdatedState 別のComposable関数へ渡す
62. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState
63. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState 0, 1, 2 … と増えていく
64. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState 最初の1回だけ実行
65. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState 5秒後にログを表示
66. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState ？？？
67. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState Count = 0
68. @Composable private fun Content(count: Int) { LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState Count = 0 最初の引数がキャプチャされるので 0 のまま
69. 値が変わったら LauchedEffect を再起動する 72
70. @Composable private fun Content(count: Int) { LaunchedEffect(count) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState
71. @Composable private fun Content(count: Int) { LaunchedEffect(count) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState 値が変わったら再起動
72. @Composable private fun Content(count: Int) { LaunchedEffect(count) { delay(5000) Timber.d("Count = $count") } } rememberUpdatedState 値が変わるたびに最初から数え直し
73. rememberUpdatedState を使う 76
74. @Composable private fun Content(count: Int) { val currentCount by rememberUpdatedState(count) LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $currentCount") } } rememberUpdatedState
75. @Composable private fun Content(count: Int) { val currentCount by rememberUpdatedState(count) LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $currentCount") } } rememberUpdatedState 引数の値を rememberUpdatedState で Stateに変換
76. @Composable private fun Content(count: Int) { val currentCount by rememberUpdatedState(count) LaunchedEffect(Unit) { delay(5000) Timber.d("Count = $currentCount") } } rememberUpdatedState 変換した変数を参照
77. val currentCount = rememberUpdatedState(count) val currentCount = remember { mutableIntStateOf(count) } currentCount.value = count rememberUpdatedState
78. rememberUpdatedState が必要かどうかの判断 81
79. rememberUpdatedStateが必要か検討するポイント • Composeの外で変化する状態を参照している • LauchedEffect, DisposableEffect の Key ではない状態を参照 • 時間が経過して使用される状態への参照 • コールバック関数 82
80. SideEffect 83
81. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } return analytics } SideEffect
82. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } return analytics } SideEffect
83. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } return analytics } SideEffect
84. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } return analytics } SideEffect Userの状態が更新 → Recomposition 1
85. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } return analytics } SideEffect Userの状態が更新 → Recomposition Recomposition → SideEffect実行 1 2
86. SideEffect のメリット 89
87. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } analytics.setUserProperty("user_type", user.type) return analytics } SideEffect これと同じ？？
88. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } analytics.setUserProperty("user_type", user.type) error("Error") return analytics } SideEffect エラー発生
89. @Composable fun rememberAnalytics(user: User): FirebaseAnalytics { val analytics = remember { Firebase.analytics } SideEffect { analytics.setUserProperty("user_type", user.type) } analytics.setUserProperty("user_type", user.type) error("Error") return analytics } SideEffect 実行されない 実行される
90. SideEffect とログ 93
91. val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } Timber.d("index = ${listState.firstVisibleItemIndex}") SideEffect
92. val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } Timber.d("index = ${listState.firstVisibleItemIndex}") SideEffect スクロールのたびに状態が変わる
93. val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } Timber.d("index = ${listState.firstVisibleItemIndex}") SideEffect スクロールのたびに状態が変わる 状態の参照 = Recomposition対象
94. val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } Timber.d("index = ${listState.firstVisibleItemIndex}") SideEffect スクロールのたびに状態が変わる 状態の参照 = Recomposition対象 スクロールのたびに Recomposition
95. val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } Timber.d("index = ${listState.firstVisibleItemIndex}") SideEffect { Timber.d("index = ${listState.firstVisibleItemIndex}") } SideEffect これが要因でRecompositionが発生しなくなる
96. derivedStateOf 99
97. Box { val listState = rememberLazyListState() LazyColumn(state = listState) { /* ... */ } val showButton = listState.firstVisibleItemIndex > 0 if (showButton) { Button() { Text(text = "ScrollTop") } } } derivedStateOf
98. Box { val listState = rememberLazyListState() LazyColumn(state = listState) { /* ... */ } val showButton = listState.firstVisibleItemIndex > 0 if (showButton) { Button() { Text(text = "ScrollTop") } } } derivedStateOf スクロールしている場合はボタンを表示
99. Box { val listState = rememberLazyListState() LazyColumn(state = listState) { /* ... */ } val showButton = listState.firstVisibleItemIndex > 0 if (showButton) { Button() { Text(text = "ScrollTop") } } } derivedStateOf スクロールのたびに Recomposition スクロールのたびに状態が変わる
100. Box { val listState = rememberLazyListState() LazyColumn(state = listState) { /* ... */ } val showButton = listState.firstVisibleItemIndex > 0 if (showButton) { Button() { Text(text = "ScrollTop") } } } derivedStateOf スクロールのたびに Recomposition スクロールのたびに状態が変わる ここが変わったときだけ Recompositionしてほしい
101. Box { // ... val showButton = listState.firstVisibleItemIndex > 0 val showButton by remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } } // ... } derivedStateOf derivedStateOf で結果が変わった時に Recompositionするようにする
102. derivedStateOf を 使わないほうが良い場合 105
103. @Composable fun Content(friends: List<User>) { val friendsCount by remember { derivedStateOf { friends.size } } } derivedStateOf
104. @Composable fun Content(friends: List<User>) { val friendsCount by remember { derivedStateOf { friends.size } } } derivedStateOf サイズが変更されたら変数の値も更新
105. @Composable fun Content(friends: List<User>) { val friendsCount by remember { derivedStateOf { friends.size } } val friendsCount = friends.size } derivedStateOf
106. produceState 109
107. val count by produceState(0) { (1..10).forEach { delay(1000) value = it } } Text(text = "Count = $count") produceState
108. val count by produceState(0) { (1..10).forEach { delay(1000) value = it } } Text(text = "Count = $count") produceState 初期値 0 初期値 0
109. val count by produceState(0) { (1..10).forEach { delay(1000) value = it } } Text(text = "Count = $count") produceState 1から10までを1秒ごとにループ
110. val count by produceState(0) { (1..10).forEach { delay(1000) value = it } } Text(text = "Count = $count") produceState 　value に値を設定 1
111. val count by produceState(0) { (1..10).forEach { delay(1000) value = it } } Text(text = "Count = $count") produceState 　value に値を設定 count に設定される 1 2
112. val count by produceState(0) { (1..10).forEach { delay(1000) value = it } } Text(text = "Count = $count") produceState 　value に値を設定 count に設定される 表示 1 2 3
113. クリーンアップが必要な時 116
114. val count by produceState(0) { // ... awaitDispose { // ... } } produceState 　クリーンアップ処理
115. snapshotFlow 118
116. snapshotFlow var count by remember { mutableIntStateOf(0) } LaunchedEffect(Unit) { snapshotFlow { count }.map { "Count = $it" }.collect { Timber.d(it) } }
117. var count by remember { mutableIntStateOf(0) } LaunchedEffect(Unit) { snapshotFlow { count }.map { "Count = $it" }.collect { Timber.d(it) } } snapshotFlow 　更新されていくカウント
118. var count by remember { mutableIntStateOf(0) } LaunchedEffect(Unit) { snapshotFlow { count }.map { "Count = $it" }.collect { Timber.d(it) } } snapshotFlow
119. var count by remember { mutableIntStateOf(0) } LaunchedEffect(Unit) { snapshotFlow { count }.map { "Count = $it" }.collect { Timber.d(it) } } snapshotFlow State を Flow に変換
120. var count by remember { mutableIntStateOf(0) } LaunchedEffect(Unit) { snapshotFlow { count }.map { "Count = $it" }.collect { Timber.d(it) } } snapshotFlow Flow の処理
121. var firstName by remember { mutableStateOf("") } var lastName by remember { mutableStateOf("") } LaunchedEffect(Unit) { snapshotFlow { "$firstName $lastName" }.collect { Timber.d(it) } } snapshotFlow 2つのStateを組み合わせた結果
122. まとめ 125
123. まとめ • LaunchedEffect ◦ 状態が変わった時に何かしたい時 ◦ Coroutines • rememberCoroutineScope ◦ UIイベントからCoroutinesの処理をしたい時 • DisposableEffect ◦ 何かクリーンアップが必要な時 • rememberUpdatedState ◦ 変化する状態を参照している時 126
124. まとめ • SideEffect ◦ Compositionが成功した時に何かしたい時 ◦ ログ • derivedStateOf ◦ 状態から別の値を派生させたい時 • produceState ◦ Compose外の状態をComposeのStateに変換したい時 • snapshotFlow ◦ ComposeのStateの更新をCompose外でFlowで受け取りたい時 127
125. ありがとうございました 128