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

Jetpack Compose の
Side-effect を使いこなす
Kenji Abe - 2023/09/15

View Slide

自己紹介
● Kenji Abe
● Google Developers Expert for Android, Kotlin
● DeNA Co., Ltd.
● X: @STAR_ZERO
● Bluesky: @star-zero.com
2

View Slide

Side-effect?
(副作用)
3

View Slide

Side effect (副作用)
● 関数や操作などが結果を返すなどの主となる効果以外の効果
○ グローバル変数の変更
○ I/O操作
● ほかのSide effectを起こす関数の呼び出し
● 実行順によって結果が変わる可能性がある
● デバッグが困難になる
● テストが難しくなる
4

View Slide

Composeにおける
Side effect
5

View Slide

副作用とは、
コンポーズ可能な関数の範囲外で
発生するアプリの状態の変化を
指します。
6
https://developer.android.com/jetpack/compose/side-effects?hl=ja

View Slide

ComposeにおけるSide effect
● Composable関数はSide effectがないようにすることが理想
● 予測できないRecomposition
○ 実行順
○ スキップ
○ 破棄
7

View Slide

Side effectが必要な状況
8

View Slide

● スナックバーを表示する
● 1 回限りのイベントをトリガーする
● 特定の状態で別の画面に移動する
● などなど
9

View Slide

● スナックバーを表示する
● 1 回限りのイベントをトリガーする
● 特定の状態で別の画面に移動する
● などなど
10
Side effectを安全に
実行する必要がある

View Slide

Side effect APIs
● LaunchedEffect
● rememberCoroutineScope
● DisposableEffect
● rememberUpdatedState
● SideEffect
● derivedStateOf
● produceState
● snapshotFlow
11

View Slide

LaunchedEffect
12

View Slide

LauchedEffect
var showSnackbar by remember { mutableStateOf(false) }
LaunchedEffect(showSnackbar) {
if (showSnackbar) {
snackbarHostState.showSnackbar(
message = "OK"
)
showSnackbar = false
}
}

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
後述

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
Coroutines

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
Snackbarを表示

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
フラグを戻して、次回も表示できるように

View Slide

LaunchedEffectの
引数について
19

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
Key: 値が変わったときに起動される

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
false
1

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
false
1
初回は必ず起動する
2

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
Recomposition

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
false のまま
3

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
false のまま
3
Key が変更されてないので
実行されない
4

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
showSnackbar = true

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
false → true
5

View Slide

if (showSnackbar) {
message = "OK"
)
}
}
LauchedEffect
false → true
5
Key が変更されたので
実行される
6

View Slide

いろいろなKey
29

View Slide

LaunchedEffect(Unit) {
// ...
}
LauchedEffect
ずっと同じ値
最初の1回だけ実行

View Slide

LaunchedEffect(key1, key2, key3) {
// ...
}
LauchedEffect
複数のKey
どれかが変わったら実行する

View Slide

LaunchedEffect
のCoroutines
32

View Slide

LaunchedEffectのCoroutines
● キャンセルするタイミング
○ keyが変わってLauchedEffectが再起動するとき
○ CompositionからLeaveするとき
33
https://developer.android.com/jetpack/compose/lifecycle

View Slide

LaunchedEffect(key) {
delay(5000)
Timber.d("OK")
}
LauchedEffect

View Slide

delay(5000)
Timber.d("OK")
}
LauchedEffect
5秒経過前にkeyが変わると
ログが出力されずに最初から数え直し

View Slide

delay(5000)
Timber.d("OK")
}
LauchedEffect
5秒経過前にCompositionからLeaveすると
ログが出力されずに終了

View Slide

rememberCoroutineScope
37

View Slide

val scope = rememberCoroutineScope()
Button(
onClick = {
scope.launch {
snackbarHostState.showSnackbar("Hello, World")
}
}
) {
Text(text = "Show Snackbar")
}

View Slide

Button(
onClick = {
scope.launch {
}
}
) {
}
CoroutinesScope取得

View Slide

Button(
onClick = {
scope.launch {
}
}
) {
}
ScopeからCoroutines起動

View Slide

Button(
onClick = {
scope.launch {
}
}
) {
}
Composition から Leave するときにキャンセル

View Slide

DisposableEffect
45

View Slide

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)
}
}

View Slide

// ...
}
}
onDispose {
}
}
DisposableEffect
LifecycleOwner取得

View Slide

// ...
}
}
onDispose {
}
}
DisposableEffect
引数は LauchedEffect と同じ感じ

View Slide

// ...
}
}
onDispose {
}
}
DisposableEffect
Coroutinesじゃない

View Slide

// ...
}
}
onDispose {
}
}
DisposableEffect
Lifecycle監視の処理

View Slide

// ...
}
}
onDispose {
}
}
DisposableEffect
クリーンアップの処理

View Slide

DisposableEffect
の処理の流れ
52

View Slide

DisposableEffect
var flag by remember { mutableStateOf(false) }
DisposableEffect(flag) {
// ...
onDispose {
// ...
}
}

View Slide

// ...
onDispose {
// ...
}
}
DisposableEffect
false
1

View Slide

// ...
onDispose {
// ...
}
}
DisposableEffect
false
1
実行
2

View Slide

// ...
onDispose {
// ...
}
}
DisposableEffect
false → true
3

View Slide

// ...
onDispose {
// ...
}
}
DisposableEffect
実行
4

View Slide

// ...
onDispose {
// ...
}
}
DisposableEffect
実行
5

View Slide

59
LaunchedEffect DisposableEffect
● クリーンアップできない
● Coroutinesで起動
○ 若干のオーバーヘッド
● onDisposeによるクリーンアップ
● Coroutinesではない

View Slide

rememberUpdatedState
60

View Slide

を使わなかった場合
61

View Slide

var count by remember { mutableIntStateOf(0) }
Button(onClick = { count++ }) {
Text(text = "Increment: $count")
}
Content(count = count)

View Slide

}
単純なインクリメント処理

View Slide

}
別のComposable関数へ渡す

View Slide

@Composable
private fun Content(count: Int) {
delay(5000)
Timber.d("Count = $count")
}
}

View Slide

@Composable
delay(5000)
}
}
0, 1, 2 … と増えていく

View Slide

@Composable
delay(5000)
}
}
最初の1回だけ実行

View Slide

@Composable
delay(5000)
}
}
5秒後にログを表示

View Slide

@Composable
delay(5000)
}
}
？？？

View Slide

@Composable
delay(5000)
}
}
Count = 0

View Slide

@Composable
delay(5000)
}
}
Count = 0
最初の引数がキャプチャされるので 0 のまま

View Slide

値が変わったら LauchedEffect
を再起動する
72

View Slide

@Composable
LaunchedEffect(count) {
delay(5000)
}
}

View Slide

@Composable
delay(5000)
}
}
値が変わったら再起動

View Slide

@Composable
delay(5000)
}
}
値が変わるたびに最初から数え直し

View Slide

を使う
76

View Slide

@Composable
val currentCount by rememberUpdatedState(count)
delay(5000)
Timber.d("Count = $currentCount")
}
}

View Slide

@Composable
delay(5000)
}
}
引数の値を rememberUpdatedState で Stateに変換

View Slide

@Composable
delay(5000)
}
}
変換した変数を参照

View Slide

val currentCount = rememberUpdatedState(count)
val currentCount = remember { mutableIntStateOf(count) }
currentCount.value = count

View Slide

が必要かどうかの判断
81

View Slide

rememberUpdatedStateが必要か検討するポイント
● Composeの外で変化する状態を参照している
● LauchedEffect, DisposableEffect の Key ではない状態を参照
● 時間が経過して使用される状態への参照
● コールバック関数
82

View Slide

SideEffect
83

View Slide

@Composable
fun rememberAnalytics(user: User): FirebaseAnalytics {
val analytics = remember { Firebase.analytics }
SideEffect {
analytics.setUserProperty("user_type", user.type)
}
return analytics
}
SideEffect

View Slide

@Composable
SideEffect {
}
return analytics
}
SideEffect
Userの状態が更新 → Recomposition
1

View Slide

@Composable
SideEffect {
}
return analytics
}
SideEffect
Userの状態が更新 → Recomposition
Recomposition → SideEffect実行
1
2

View Slide

SideEffect のメリット
89

View Slide

@Composable
SideEffect {
}
return analytics
}
SideEffect
これと同じ？？

View Slide

@Composable
SideEffect {
}
error("Error")
return analytics
}
SideEffect
エラー発生

View Slide

@Composable
SideEffect {
}
error("Error")
return analytics
}
SideEffect
実行されない
実行される

View Slide

SideEffect とログ
93

View Slide

val listState = rememberLazyListState()
LazyColumn(state = listState) {
// ...
}
Timber.d("index = ${listState.firstVisibleItemIndex}")
SideEffect

View Slide

// ...
}
SideEffect
スクロールのたびに状態が変わる

View Slide

// ...
}
SideEffect
状態の参照 = Recomposition対象

View Slide

// ...
}
SideEffect
状態の参照 = Recomposition対象
スクロールのたびに
Recomposition

View Slide

// ...
}
SideEffect {
}
SideEffect
これが要因でRecompositionが発生しなくなる

View Slide

derivedStateOf
99

View Slide

Box {
LazyColumn(state = listState) { /* ... */ }
val showButton = listState.firstVisibleItemIndex > 0
if (showButton) {
Button() {
Text(text = "ScrollTop")
}
}
}
derivedStateOf

View Slide

Box {
if (showButton) {
Button() {
}
}
}
derivedStateOf
スクロールしている場合はボタンを表示

View Slide

Box {
if (showButton) {
Button() {
}
}
}
derivedStateOf
スクロールのたびに Recomposition

View Slide

Box {
if (showButton) {
Button() {
}
}
}
derivedStateOf
スクロールのたびに Recomposition
ここが変わったときだけ
Recompositionしてほしい

View Slide

Box {
// ...
val showButton by remember {
derivedStateOf {
listState.firstVisibleItemIndex > 0
}
}
// ...
}
derivedStateOf
derivedStateOf で結果が変わった時に
Recompositionするようにする

View Slide

derivedStateOf を
使わないほうが良い場合
105

View Slide

@Composable
fun Content(friends: List) {
val friendsCount by remember {
derivedStateOf {
friends.size
}
}
}
derivedStateOf

View Slide

@Composable
derivedStateOf {
friends.size
}
}
}
derivedStateOf
サイズが変更されたら変数の値も更新

View Slide

@Composable
derivedStateOf {
friends.size
}
}
val friendsCount = friends.size
}
derivedStateOf

View Slide

produceState
109

View Slide

val count by produceState(0) {
(1..10).forEach {
delay(1000)
value = it
}
}
Text(text = "Count = $count")
produceState

View Slide

(1..10).forEach {
delay(1000)
value = it
}
}
produceState
初期値 0
初期値 0

View Slide

(1..10).forEach {
delay(1000)
value = it
}
}
produceState
1から10までを1秒ごとにループ

View Slide

(1..10).forEach {
delay(1000)
value = it
}
}
produceState
　value に値を設定
1

View Slide

(1..10).forEach {
delay(1000)
value = it
}
}
produceState
count に設定される
1
2

View Slide

(1..10).forEach {
delay(1000)
value = it
}
}
produceState
count に設定される
表示
1
2
3

View Slide

クリーンアップが必要な時
116

View Slide

// ...
awaitDispose {
// ...
}
}
produceState
　クリーンアップ処理

View Slide

snapshotFlow
118

View Slide

snapshotFlow
snapshotFlow {
count
}.map {
"Count = $it"
}.collect {
Timber.d(it)
}
}

View Slide

snapshotFlow {
count
}.map {
"Count = $it"
}.collect {
Timber.d(it)
}
}
snapshotFlow
　更新されていくカウント

View Slide

snapshotFlow {
count
}.map {
"Count = $it"
}.collect {
Timber.d(it)
}
}
snapshotFlow

View Slide

snapshotFlow {
count
}.map {
"Count = $it"
}.collect {
Timber.d(it)
}
}
snapshotFlow
State を Flow に変換

View Slide

snapshotFlow {
count
}.map {
"Count = $it"
}.collect {
Timber.d(it)
}
}
snapshotFlow
Flow の処理

View Slide

var firstName by remember { mutableStateOf("") }
var lastName by remember { mutableStateOf("") }
snapshotFlow {
"$firstName $lastName"
}.collect {
Timber.d(it)
}
}
snapshotFlow
2つのStateを組み合わせた結果

View Slide

まとめ
125

View Slide

まとめ
● LaunchedEffect
○ 状態が変わった時に何かしたい時
○ Coroutines
● rememberCoroutineScope
○ UIイベントからCoroutinesの処理をしたい時
● DisposableEffect
○ 何かクリーンアップが必要な時
● rememberUpdatedState
○ 変化する状態を参照している時
126

View Slide

まとめ
● SideEffect
○ Compositionが成功した時に何かしたい時
○ ログ
● derivedStateOf
○ 状態から別の値を派生させたい時
● produceState
○ Compose外の状態をComposeのStateに変換したい時
● snapshotFlow
○ ComposeのStateの更新をCompose外でFlowで受け取りたい時
127

View Slide

ありがとうございました
128

View Slide

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

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

star_zero

More Decks by star_zero

Other Decks in Programming

Featured

Transcript