Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose State Practices

Avatar for takahirom takahirom
December 11, 2021

Jetpack Compose State Practices

Avatar for takahirom

takahirom

December 11, 2021
Tweet

More Decks by takahirom

Other Decks in Programming

Transcript

  1. ࣗ෼ʹ͍ͭͯɹ takahirom • Takahiro Menju • Androidʹؔ͢Δٕज़͕޷͖ • DroidKaigi co-organizer

    • Google Developers Expert for Android • CyberAgent.Inc ABEMA • Twitter takahirom (@new_runnable) • GitHub takahirom
  2. Jetpack Composeͱ͸ʁ “Jetpack Compose ͸ɺωΠςΟϒ UI ΛϏϧυ͢ΔͨΊͷ Android ͷ࠷৽πʔϧΩοτ Ͱ͢ɻAndroid

    ͷ UI ։ൃΛ؆ૉԽ͠ɺՃ଎͠·͢ɻগͳ͍ίʔυɺύϫϑϧͳπʔϧɺ ௚ײతͳ Kotlin API Λ࢖༻ͯ͠ΞϓϦΛ͙͢ʹಈ͔͢͜ͱ͕Ͱ͖·͢ɻ” https://d.android.com/jetpack/compose?hl=ja
  3. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ ͞ΕΔΑ͏ʹ͢Δ ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕ ؂ࢹ͞Ε͓ͯΓɺ Jetpack Compose͸MutableStateʹ
 ରͯ͠ಡΈࠐΈͨ͠Composableؔ਺

    Λอ͍࣋ͯ͠ΔͨΊɺ Compose͸MutableState͕มߋ͞Εͨͱ͖ʹ StateΛಡΈࠐΜͰ͍ΔComposableؔ਺Λݺͼ ग़͠·͢ɻ(ྫ֎͕͋Γগ͠ਖ਼֬Ͱ͸ͳ͍ͷͰ͕͢େମͦ͏Ͱ͢)
  4. Practice1: දࣔ͢ΔStateͷมߋ͸ComposeʹΑͬͯ؍ଌ ͞ΕΔΑ͏ʹ͢Δ ͳͥMySwitch()͸΋͏Ұ౓ಈ͘ͷ͔ʁ ࣮͸Jetpack ComposeͰ͸StateͷಡΈࠐΈ͕ ؂ࢹ͞Ε͓ͯΓɺ Compose͸MySwitch()͕MutableState.valueΛಡΜͩ͜ͱΛ஌͍ͬͯΔਤ Jetpack Compose͸MutableStateʹ


    ରͯ͠ಡΈࠐΈͨ͠Composableؔ਺ Λอ͍࣋ͯ͠ΔͨΊɺ Compose͸MutableState͕มߋ͞Εͨͱ͖ʹ StateΛಡΈࠐΜͰ͍ΔComposableؔ਺Λݺͼ ग़͠·͢ɻ(ྫ֎͕͋Γগ͠ਖ਼֬Ͱ͸ͳ͍ͷͰ͕͢େମͦ͏Ͱ͢)
  5. Practice2: ComposableͷதͰ࡞ΒΕͨState͸ remember͞Εͳ͚Ε͹ͳΒͳ͍ remember͸࣮ࡍԿΛߦ͏ͷ͔ʁ A value computed by remember is

    stored in the Composition during initial composition, and the stored value is returned during recomposition. https://d.android.com/jetpack/compose/state#state-in-composables remember{}ͷ஋͸Compositionʹอ࣋͞ΕɺͦΕ͕࣍ͷݺͼग़͠Ͱ࢖ΘΕΔ
  6. Practice4: Stateͷมߋ͸Composableؔ਺ͷείʔϓ಺ Ͱߦͬͯ͸ͳΒͳ͍ ❌ DON’T λΠτϧͷ··”Stateͷมߋ͸Composableؔ਺ͷείʔϓ ಺Ͱߦͬͯ͸ͳΒͳ͍” `onCheckedChange`ʹ౉͍ͯ͠ΔϥϜμ͸Composableؔ ਺Ͱ͸ͳ͍ͷͰComposableؔ਺ͷείʔϓ֎ͷͨΊɺมߋ ͯ͠΋҆શͰ͢ɻ

    `MySwitch()`͕Compositionʹೖͬͨͱ͖΍ग़ͨͱ͖ʹState Λมߋ͍ͨ͠৔߹͸ɺLaunchedEffectͳͲͷSideEffectͷؔ ਺ͷར༻Λݕ౼͠·͠ΐ͏ɻ ͭ·ΓͲ͏͢Ε͹͍͍ͷ͔ʁ https://d.android.com/jetpack/compose/side-effects
  7. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ ೳͰςετՄೳʹ͠Α͏ ⭕ DO State hoistingͱ͸ʁ StateΛ্ʹ্͛Δ͜ͱͰɺίϯϙʔωϯτ ΛStatelessʹ͢Δύλʔϯ


    Composableؔ਺ʹదԠ͢Δ৔߹͸͍͍ͩͨ ҎԼ2ͭͷҾ਺Λಋೖ͢Δ͜ͱΛҙຯ͢Δ value: T දࣔ͢Δσʔλ onValueChange: (T) -> Unit ஋ͷมߋΛཁ ٻ͢ΔΠϕϯτ
  8. Practice5: State hoistingͰComposableؔ਺Λ࠶ར༻Մ ೳͰςετՄೳʹ͠Α͏ ⭕ DO State hoistingͱ͸ʁ StateΛ্ʹ্͛Δ͜ͱͰɺίϯϙʔωϯτ ΛStatelessʹ͢Δύλʔϯ


    DON’TͰ΋ಈ͘͠ྑ͍ͷͰ͸ʁʁ Composableؔ਺ʹదԠ͢Δ৔߹͸͍͍ͩͨ ҎԼ2ͭͷҾ਺Λಋೖ͢Δ͜ͱΛҙຯ͢Δ value: T දࣔ͢Δσʔλ onValueChange: (T) -> Unit ஋ͷมߋΛཁ ٻ͢ΔΠϕϯτ
  9. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ⭕ DO ❌

    DON’T DOͷྫͰ͸ઌఔͱಉ༷ʹ State hoistingͰ࣮૷͍ͯ͠ΔΈ͍ͨ ਌͚ͩͰStateΛ͍࣋ͬͯΔ🙆
  10. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ⭕ DO ❌

    DON’T ॳظ஋ͷinitialCheckedΛ ౉͍ͯ͠Δ ਌Ͱ΋ࣗ෼Ͱ΋StateΛ ؅ཧ͍ͯ͠Δɻ ͜ΕͳΒ࠶ར༻Ͱ͖ͯ
 ςετͰ͖ͦ͏͡Όͳ͍ʁʁ🤔
  11. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ͳͥState hoisting͢Δͷ͔ʁ λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle

    source of truthʹͰ͖Δͨ ΊͰ͢ɻ
 ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ όάΛ๷͙ͨΊʹ͸ 
 ⭕ DO Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ
  12. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ͳͥState hoisting͢Δͷ͔ʁ λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle

    source of truthʹͰ͖Δͨ ΊͰ͢ɻ
 ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ όάΛ๷͙ͨΊʹ͸ 
 ⭕ DO Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ มߋෆՄೳ(immutable)ͳStateΛྲྀ͍ͯ͘͠
  13. Practice6: State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ͳͥState hoisting͢Δͷ͔ʁ λΠτϧʹ΋ॻ͍ͯ͋Δͱ͓ΓSingle

    source of truthʹͰ͖Δͨ ΊͰ͢ɻ
 ࠓճͷྫ΋ؤுΕ͹όάΛͳͤ͘Δͱࢥ͍·͕͢ࠓճͷΑ͏ͳ όάΛ๷͙ͨΊʹ͸ 
 ⭕ DO ͦΕ͕Single source of truthͱݺ͹ΕΔߏ଄Խͷํ๏Ͱ͢ɻ
 ͜ΕΛState hoisting͸Մೳʹ͠·͢ɻ Stateͷෳ੡Λ๷͗ɺStateͷมߋՕॴΛ1ͭʹ͢Δ มߋෆՄೳ(immutable)ͳStateΛྲྀ͍ͯ͘͠
  14. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ ⭕ DO ͜͜Ͱ
 SettingScreenState
 ( = State

    holder)Λ࡞ͬͯ Composition಺Ͱอ࣋͢Δ State holderΛ࢖͏ଆͷίʔυ
  15. Practice9: Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ ʹ͠Α͏ ⭕ DO ͜͜Ͱ
 SettingScreenState
 ( = State

    holder)Λ࡞ͬͯ Composition಺Ͱอ࣋͢Δ SettingScreenStateͰอ͍࣋ͯ͠Δ ஋Λ࢖͏͚ͩ State holderΛ࢖͏ଆͷίʔυ
  16. Jetpack ComposeͷState؅ཧͷϓϥΫςΟε·ͱΊ State hoistingͰComposableؔ਺Λ࠶ར༻ՄೳͰςετՄೳʹ͠Α͏ State hoistingͰSingle source of truthʹ͠Α͏ɻ·ͨState hoisting͸গ

    ͳ͘ͱ΋Ұ൪௿͍StateΛফඅ͍ͯ͠Δڞ௨ͷ਌ʹ͠Α͏ɻ ඞཁͳҾ਺͚ͩΛComposableؔ਺ʹ౉ͦ͏ Architecture ComponentͷViewModelʹCompositionͰอ࣋͞Ε͍ͯΔ ঢ়ଶΛ౉͞ͳ͍Α͏ʹ͠Α͏ Composableؔ਺ʹϩδοΫ͕ॻ͔Εͳ͍Α͏ʹ͠Α͏ 05 06
 07 08
 09