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
820
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
「脳に収まるコードの書き方」を読んで学んだこと
mikanichinose
1
110
RepositoryのSSoT化
mikanichinose
0
34
Kotlin Multiplatform 始めました
mikanichinose
1
120
Web APIをなぜつくるのか
mikanichinose
0
2.1k
イベントをどう管理するか
mikanichinose
3
330
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
430
Strong Skipping Mode によってrecompositionはどう変わったのか
mikanichinose
0
290
Modeling UiEvent
mikanichinose
0
68
UIの構成要素に関する考察
mikanichinose
0
65
Other Decks in Technology
See All in Technology
[JAWS-UG 栃木 #2]AWS FISはドSなのか?システムに試練を与えて強くする!
sh_fk2
1
260
RDRA3.0を知ろう
kanzaki
2
340
AWS LambdaでSocket通信サーバーレスアプリケーションのリアルタイム通信 / 20250523 Kumiko Hennmi
shift_evolve
1
330
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
500
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
Digitization部 紹介資料
sansan33
PRO
1
3.7k
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
160
型がない世界に生まれ落ちて 〜TypeScript運用進化の歴史〜
narihara
1
190
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
1
7.1k
AIに実況させる / AI Streamer
motemen
3
1.2k
AI駆動時代の新規事業の作り方
ryohysk
2
140
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Side Projects
sachag
453
42k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.5k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
GraphQLとの向き合い方2022年版
quramy
46
14k
How STYLIGHT went responsive
nonsquared
100
5.6k
What's in a price? How to price your products and services
michaelherold
245
12k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Automating Front-end Workflow
addyosmani
1370
200k
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 の実用的な使い方ワカラン