Hosting states in Compose

Transcript

1. Hosting states in Compose Dinorah Tovar Google Developer Expert Platform

   Mobile Engineer 
 @ konfío.mx @ddinorahtovar @ddinorahtovar

2. But first, lifecycles

3. Everything has some type of lifecycle @ddinorahtovar 
 General Application

   Activity Fragment •Defines an object that has an Android Lifecycle Classes

4. @Composable @ddinorahtovar •Composable functions are fast, idempotent, and the “remember”

   • Stateless functions •New data -> Recomposition (redraw if needed and only for the parts that are required)

5. @Composable @ddinorahtovar •Composable functions works different, they emit data @Composable

   fun view(data: Int) data: Int Composition emit

6. States and recomposition

7. States @ddinorahtovar •Are, pretty much, any value that can change

   over time. Name How States A composable has to explicitly be told the new state in order for it to update accordingly. Why When the state is updated, we go over a process of Recomposition

8. States @ddinorahtovar •Holds a value (Can be read and updated)

   interface State<T : Any?> •The current RecomposeScope will be subscribed to changes of that value

9. States @ddinorahtovar interface MutableState<T> : State<T> { override var value:

   T } •mutableStateOf creates an observable MutableState<T>, which is an observable type integrated with the compose runtime.

10. Init composition vs recomposition @ddinorahtovar First Interaction Composition Insert “A”

    Insert “B” Second Interaction Re-composition

11. Compose @ddinorahtovar •The composition is the state maintained by the

    memory Composition 
 Slot Table Composer Compose Runtime

12. Compose Runtime @ddinorahtovar Composition 
 Compose Runtime Slot Table Composer

    •Fundamental building blocks of Compose's programming model and state management, and core runtime for the Compose Compiler Plugin to target. •Handle everything for the states

13. Slot table @ddinorahtovar Composition 
 Slot Table Composer Compose Runtime

    •Current state of the Composition •Updates with every composition •Gap Buffer - data structure •Positional Memorization

14. Slot table @ddinorahtovar Unused Used B Used A Internal array

    Gap Collection Emit Composition 
 Slot Table Composer Compose Runtime Collect B Collect A

15. Composer @ddinorahtovar Composition 
 Composer Compose Runtime Slot Table fun

    MultiMeasureLayout( modifier: Modifier = Modifier, content: @Composable () -> Unit, measurePolicy: MeasurePolicy ) { val materialized = currentComposer.materialize(modifier) val density = LocalDensity.current val layoutDirection = LocalLayoutDirection.current ReusableComposeNode<LayoutNode, Applier<Any>>( factory = LayoutNode.Constructor, update = { set(materialized, ComposeUiNode.SetModifier) set(measurePolicy, ComposeUiNode.SetMeasurePolicy) set(density, ComposeUiNode.SetDensity) set(layoutDirection, ComposeUiNode.SetLayoutDirection) @Suppress("DEPRECATION") init { this.canMultiMeasure = true } }, content = content ) }

16. Composer @ddinorahtovar Composition 
 Composer Compose Runtime Slot Table fun

    MultiMeasureLayout( modifier: Modifier = Modifier, content: @Composable () -> Unit, measurePolicy: MeasurePolicy ) { val materialized = currentComposer.materialize(modifier) val density = LocalDensity.current val layoutDirection = LocalLayoutDirection.current ReusableComposeNode<LayoutNode, Applier<Any>>( factory = LayoutNode.Constructor, update = { set(materialized, ComposeUiNode.SetModifier) set(measurePolicy, ComposeUiNode.SetMeasurePolicy) set(density, ComposeUiNode.SetDensity) set(layoutDirection, ComposeUiNode.SetLayoutDirection) @Suppress("DEPRECATION") init { this.canMultiMeasure = true } }, content = content ) }

17. Composer @ddinorahtovar Composition 
 Composer Compose Runtime Slot Table @Composable

    inline fun <T : Any?, reified E : Applier<*>> ReusableComposeNode( noinline factory: () -> T, update: @DisallowComposableCalls Updater<T>.() -> Unit, content: @Composable () -> Unit ) { if (currentComposer.applier !is E) invalidApplier() currentComposer.startReusableNode() if (currentComposer.inserting) { currentComposer.createNode(factory) } else { currentComposer.useNode() } currentComposer.disableReusing() Updater<T>(currentComposer).update() currentComposer.enableReusing() content()

18. Recompose and Remember

19. Scopes for recomposition @ddinorahtovar •The composition is the state maintained

    by the memory 🧠

20. Remember 🧠 @ddinorahtovar •@Composable fun can store a single object

    in memory by using the remember composable •Remember the value produced by calculation •calculation will only be evaluated during the composition •Recomposition will always return the value produced by composition

21. Remember @ddinorahtovar @Composable fun View() { val value = remember

    { mutableStateOf("") } var someValue by remember { mutableStateOf("") } val (someOtherValue, setValue) = remember { mutableStateOf("") } }

22. Remember @ddinorahtovar @Composable inline fun <T> remember(calculation: @DisallowComposableCalls () ->

    T): T = currentComposer.cache(false, calculation) @Composable fun View() { var variable by remember { mutableStateOf("") } }

23. Remember @ddinorahtovar •Remember is the one that conserve the state,

    not the @Composable fun @Composable fun view(data: Int) data: Int Composition emit remember by { }

24. Remember @ddinorahtovar •So this save us from activity recreation? •Short

    answer: No

25. RememberSaveable @ddinorahtovar @Composabke fun View() { var variable = rememberSaveable

    { mutableStateOf("") } }

26. RememberSaveable @ddinorahtovar @Composable fun <T : Any> rememberSaveable( vararg inputs:

    Any?, saver: Saver<T, out Any> = autoSaver(), key: String? = null, init: () -> T ): T { val finalKey = if (!key.isNullOrEmpty()) { key } else { currentCompositeKeyHash.toString() } @Suppress("UNCHECKED_CAST") (saver as Saver<T, Any>) val registry = LocalSaveableStateRegistry.current val value = remember(*inputs) { val restored = registry?.consumeRestored(finalKey)?.let { saver.restore(it) } restored ?: init() }

27. RememberSaveable @ddinorahtovar val registry = LocalSaveableStateRegistry.current val value = remember(*inputs)

    { val restored = registry?.consumeRestored(finalKey)?.let { saver.restore(it) } restored ?: init() } val saverHolder = remember { mutableStateOf(saver) } saverHolder.value = saver if (registry != null) { DisposableEffect(registry, finalKey, value) { val valueProvider = { with(saverHolder.value) { SaverScope { registry.canBeSaved(it) }.save(value) } } registry.requireCanBeSaved(valueProvider()) val entry = registry.registerProvider(finalKey, valueProvider) onDispose { entry.unregister() } } } return value }

28. State hosting @ddinorahtovar •Is a pattern that to move all

    the state variables to the top-level composable function and pass them as arguments to each composable function based on the requirement 
 Decoupling @Composable fun View() @Composable fun View() @Composable fun ViewContent()

29. State Hosting @ddinorahtovar @Composable fun View(){ var variable by remember

    { mutableStateOf("") } val onValueChange = { text : String-> variable = text } Component(name= variable, onValueChange= onValueChange ) } @Composable fun ViewContent(name : String, onValueChange : (String) -> Unit ){ // Your view }

30. State hosting @ddinorahtovar 
 Decoupling @Composable fun View() @Composable fun

    View() @Composable fun ViewContent() Unidirectional Data Flows

31. State Holders @ddinorahtovar •Manage complex state UI elements. •They own

    UI elements' state and UI logic. •State holders are compoundable •ViewModels, Objects or pretty much anything 😅

32. State Holders @ddinorahtovar @Composable State Holder ViewModel/ Presenters Access to

    
 Logic UI component state UI component Composition

33. State Holders @ddinorahtovar @Composable are in charge of emi tt

    ing UI elements State holder only contains the UI logic and state

34. StateFlow and SharedFlow collection

35. SharedFlow and StateFlow @ddinorahtovar

36. SharedFlow and StateFlow collection •What do we really need? @ddinorahtovar

    •Launch and Run in specific stage •Cancel when is not longer in a stage •Automatic relaunch and cancellation

37. SharedFlow and StateFlow collection @ddinorahtovar Safe collection Using a lib

    
 repeatOnLifecycle() flowWithLifecycle() •It’s on alpha, but it works implementation: “androidx.lifecycle:lifecycle-runtime-ktx:2.4.0-alpha02"

38. repeatOnLifecycle() @ddinorahtovar Safe collection Using a lib 
 repeatOnLifecycle() flowWithLifecycle()

    private fun setObservables() = lifecycleScope.launch { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { viewModel.uiHomeState.collect { // Safe collect } } }

39. Under the hood of: repeatOnLifecycle() @ddinorahtovar public suspend fun Lifecycle.repeatOnLifecycle(

    state: Lifecycle.State, block: suspend CoroutineScope.() - > Unit ) { require(state ! == Lifecycle.State.INITIALIZED) { "repeatOnLifecycle cannot start work with the INITIALIZED lifecycle state." } if (currentState = == Lifecycle.State.DESTROYED) { return } coroutineScope { withContext(Dispatchers.Main.immediate) { if (currentState === Lifecycle.State.DESTROYED) return@withContext var launchedJob: Job? = null var observer: LifecycleEventObserver? = null } } }

40. Under the hood of: repeatOnLifecycle() @ddinorahtovar public suspend fun Lifecycle.repeatOnLifecycle(

    state: Lifecycle.State, block: suspend CoroutineScope.() - > Unit ) { require(state ! == Lifecycle.State.INITIALIZED) { "repeatOnLifecycle cannot start work with the INITIALIZED lifecycle state." } if (currentState = == Lifecycle.State.DESTROYED) { return } coroutineScope { withContext(Dispatchers.Main.immediate) { if (currentState === Lifecycle.State.DESTROYED) return@withContext var launchedJob: Job? = null var observer: LifecycleEventObserver? = null } } }

41. Under the hood of: repeatOnLifecycle() @ddinorahtovar try { suspendCancellableCoroutine<Unit> {

    cont -> val startWorkEvent = Lifecycle.Event.upTo(state) val cancelWorkEvent = Lifecycle.Event.downFrom(state) observer = LifecycleEventObserver { _, event -> if (event == startWorkEvent) { launchedJob = this@coroutineScope.launch(block = block) return@LifecycleEventObserver } if (event == cancelWorkEvent) { launchedJob ?. cancel() launchedJob = null } if (event == Lifecycle.Event.ON_DESTROY) { cont.resume(Unit) } } this@repeatOnLifecycle.addObserver(observer as LifecycleEventObserver) } } finally { ?.

42. == launchedJob = this@coroutineScope.launch(block = block) return@LifecycleEventObserver } if (event

    == cancelWorkEvent) { launchedJob ? . cancel() launchedJob = null } if (event == Lifecycle.Event.ON_DESTROY) { cont.resume(Unit) } } this@repeatOnLifecycle.addObserver(observer as LifecycleEventObserver) } } finally { launchedJob ?. cancel() observer ?. let { this@repeatOnLifecycle.removeObserver(it) } } Under the hood of: repeatOnLifecycle() @ddinorahtovar

43. repeatOnLifecycle() on fragments @ddinorahtovar Safe collection Using a lib 


    repeatOnLifecycle() flowWithLifecycle() private fun setObservables() = viewLifecycleOwner.lifecycleScope.launch { viewLifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) { viewModel.uiHomeState.collect { // Safe collect } } }

44. flowWithLifecycle() @ddinorahtovar lifecycleScope.launch { viewModel.state .flowWithLifecycle(this, Lifecycle.State.STARTED).collect { // Safe

    collect } } Safe collection Using a lib 
 repeatOnLifecycle() flowWithLifecycle()

45. Under the hood of: flowWithLifecycle() @ddinorahtovar @OptIn(ExperimentalCoroutinesApi : : class)

    public fun <T> Flow<T>.flowWithLifecycle( lifecycle: Lifecycle, minActiveState: Lifecycle.State = Lifecycle.State.STARTED ): Flow<T> = callbackFlow { lifecycle.repeatOnLifecycle(minActiveState) { this@flowWithLifecycle.collect { send(it) } } close() }

46. Under the hood of: flowWithLifecycle() @ddinorahtovar @OptIn(ExperimentalCoroutinesApi : : class)

    public fun <T> Flow<T>.flowWithLifecycle( lifecycle: Lifecycle, minActiveState: Lifecycle.State = Lifecycle.State.STARTED ): Flow<T> = callbackFlow { lifecycle.repeatOnLifecycle(minActiveState) { this@flowWithLifecycle.collect { send(it) } } close() } Cold flow •With elements that are sent to a SendChannel with a block -> ProducerScope. •It allows elements to be produced by code that is running in a different context or concurrently

47. Under the hood of: flowWithLifecycle() @ddinorahtovar @OptIn(ExperimentalCoroutinesApi : : class)

    public fun <T> Flow<T>.flowWithLifecycle( lifecycle: Lifecycle, minActiveState: Lifecycle.State = Lifecycle.State.STARTED ): Flow<T> = callbackFlow { lifecycle.repeatOnLifecycle(minActiveState) { this@flowWithLifecycle.collect { send(it) } } close() }

48. Collecting flows in @Composables @ddinorahtovar @Composable fun View(someFlow: Flow<Int>) {

    val lifecycleOwner = LocalLifecycleOwner.current val flowWithLifecycleAware = remember(someFlow, lifecycleOwner) { someFlow.flowWithLifecycle(lifecycleOwner.lifecycle, Lifecycle.State.STARTED) } val yourValueThatChange by flowWithLifecycleAware.collectAsState() // Your Composable component }

49. Give it a try!

50. Hosting states in Compose Dinorah Tovar Google Developer Expert Platform

    Mobile Engineer 
 @ konfío.mx @ddinorahtovar @ddinorahtovar