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
840
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
240
「脳に収まるコードの書き方」を読んで学んだこと
mikanichinose
1
110
RepositoryのSSoT化
mikanichinose
0
44
Kotlin Multiplatform 始めました
mikanichinose
1
130
Web APIをなぜつくるのか
mikanichinose
0
2.3k
イベントをどう管理するか
mikanichinose
3
340
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
440
Strong Skipping Mode によってrecompositionはどう変わったのか
mikanichinose
0
310
Modeling UiEvent
mikanichinose
0
81
Other Decks in Technology
See All in Technology
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
230
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
1
190
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
450
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
2
17k
shake-upを科学する
rsakata
6
630
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
180
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
ビギナーであり続ける/beginning
ikuodanaka
3
780
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
130
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Facilitating Awesome Meetings
lara
54
6.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Practical Orchestrator
shlominoach
189
11k
Visualization
eitanlees
146
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
A better future with KSS
kneath
238
17k
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 の実用的な使い方ワカラン