Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Composeのライフサイクル対応を支援するLifecycleEventEffectの紹介
Search
mikan
August 10, 2023
Technology
1
830
Composeのライフサイクル対応を支援するLifecycleEventEffectの紹介
YUMEMI.grow Mobile #6 での発表資料です
https://www.youtube.com/watch?v=gNd-3YjaUwg
mikan
August 10, 2023
Tweet
Share
More Decks by mikan
See All by mikan
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
140
「脳に収まるコードの書き方」を読んで学んだこと
mikanichinose
1
110
RepositoryのSSoT化
mikanichinose
0
40
Kotlin Multiplatform 始めました
mikanichinose
1
120
Web APIをなぜつくるのか
mikanichinose
0
2.2k
イベントをどう管理するか
mikanichinose
3
340
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
430
Strong Skipping Mode によってrecompositionはどう変わったのか
mikanichinose
0
300
Modeling UiEvent
mikanichinose
0
75
Other Decks in Technology
See All in Technology
ローカルLLMでファインチューニング
knishioka
0
100
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
590
In Praise of "Normal" Engineers (LDX3)
charity
2
1.1k
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
380
Model Mondays S2E01: Advanced Reasoning
nitya
0
420
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
24
8.9k
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
kworkdev
PRO
2
390
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
130
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
620
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
350
実践! AIエージェント導入記
1mono2prod
0
110
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How STYLIGHT went responsive
nonsquared
100
5.6k
What's in a price? How to price your products and services
michaelherold
245
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cost Of JavaScript in 2023
addyosmani
50
8.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
45k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLとの向き合い方2022年版
quramy
46
14k
Transcript
Compose のライフサイクル対応 を支援する LifecycleEventEffect の紹介 YUMEMI.grow Mobile #6 一瀬喜弘(@mikanIchinose)
自己紹介 object Mikan { val name = " 一瀬喜弘" val
company = "karabiner.tech" val hobby = listOf( " 漫画", " アニメ", " ゲーム", " 折り紙", "OSS 開発・コントリビュート", ) }
目次 LifecycleEventEffect なる副作用が入ることを知る 追加されたAPI の紹介 Compose の中でLifecycle-aware な何かを扱う場合のTips まとめ
LifecycleEventEffect なる副作用が入ることを知る
alpha リリースに入った!!
これまでのライフサイクル対応 DisposbleEffect とLifecycleEventObserver を利用する val lifecycle = LocalLifecycleOwner.current.lifecycle DisposableEffect(lifecycle) {
val lifecycleObserver = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_RESUME) { // do something } } lifecycle.addObserver(lifecycleObserver) onDispose { lifecycle.removeObserver(lifecycleObserver) } }
LifecycleEventEffect 1 つのライフサイクルイベントにたいして処理をフックできる @Composable fun LifecycleEventEffect( event: Lifecycle.Event, lifecycleOwner: LifecycleOwner
= LocalLifecycleOwner.current, onEvent: () -> Unit )
LifecycleEventEffect 使い方 LifecycleEventEffect(Lifecycle.Event.ON_START) { // do something onStart } //
イベントトラッキング LifecycleEventEffect(Lifecycle.Event.ON_RESUME) { logger.trackScreenView(screen_name) } // データ更新 // 後述するLifecycle-aware なViewModel を紐付ける実装のほうがオススメ LifecycleEventEffect(Lifecycle.Event.ON_RESUME) { viewModel.fetchData() }
LifecycleStartEffect ON_START, ON_STOP 時に処理をフックする @Composable fun LifecycleStartEffect( vararg keys: Any?,
lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current, effects: LifecycleStartStopEffectScope.() -> LifecycleStopOrDisposeEffectResult )
LifecycleStartEffect 使い方 onStopOrDispose :onStop とonDispose のときに処理を実行する LifecycleStartEffect { // ON_START
で実行したい処理 onStopOrDispose { // ON_STOP で実行したい処理 } } ` `
LifecycleStartEffect 使い方 @Composable fun Counter() { var count by remember
{ mutableStateOf(0) } LaunchedEffect(count) { delay(1000) count++ } LifecycleStartEffect(count) { Log.d("Counter", "onStart") onStopOrDispose { Log.d("Counter", "onStop or onDispose") } } Text(text = "$count") }
LifecycleResumeEffect ON_RESUME, ON_PAUSE 時に処理をフックする @Composable fun LifecycleResumeEffect( vararg keys: Any?,
lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current, effects: LifecycleResumePauseEffectScope.() -> LifecyclePauseOrDisposeEffectResult )
Lifecycle.currentStateFlow Lifecycle.currentStateAsState Lifecycle.eventFlow open val currentStateFlow: StateFlow<Lifecycle.State> @Composable fun Lifecycle.currentStateAsState():
State<Lifecycle.State> // lifecycle.currentStateFlow.collectAsState() のショートハンド val Lifecycle.eventFlow: Flow<Lifecycle.Event>
Tips: Lifecycle-aware な ViewModel を Compose に紐付 ける ライフサイクルを紐付けるだけで関数呼び出しを書かなくてよいのでタイミングを間違えることがない class
MainViewModel : ViewModel(), DefaultLifecycleObserver { override fun onResume(owner: LifecycleOwner) { // fetch data // track event // ... } } val lifecycle = LocalLifecycleOwner.current.lifecycle DisposableEffect(lifecycle) { lifecycle.addObserver(viewModel) onDispose { lifecycle.removeObserver(viewModel) } }
Tips: Lifecycle-aware な ViewModel を Compose に紐付 ける class MainViewModel
: ViewModel(), DefaultLifecycleObserver { override fun onResume(owner: LifecycleOwner) { // fetch data // track event // ... } } @Composable fun LifecycleObserver.observeLifecycleEvents(lifecycle: Lifecycle = LocalLifecycleOwner.current.lifecycle) { DisposableEffect(lifecycle) { lifecycle.addObserver(this@observeLifecycleEvents) onDispose { lifecycle.removeObserver(this@observeLifecycleEvents) } } }
Tips: Lifecycle-aware な ViewModel を Compose に紐付 ける class MainViewModel
: ViewModel(), DefaultLifecycleObserver { override fun onResume(owner: LifecycleOwner) { // fetch data // track event // ... } } @Composable fun LifecycleObserver.observeLifecycleEvents(lifecycle: Lifecycle = LocalLifecycleOwner.current.lifecycle) { DisposableEffect(lifecycle) { lifecycle.addObserver(this@observeLifecycleEvents) onDispose { lifecycle.removeObserver(this@observeLifecycleEvents) } } } @Composable fun GreetingScreen(viewModel: MainViewModel) { viewModel.observeLifecycleEvents() // ... }
まとめ Lifecycle.{Event, State} をcoroutine やcompose で利用するための拡張が入った Lifecycle を扱う系の副作用が3 つ入った 従来のDisposableEffect
を使ったボイラープレートを減らせそう( な気がする) LifecycleResumeEffect 、LifecycleStartEffect の実用的な使い方ワカラン