Hosting states in Compose Dinorah Tovar Google Developer Expert Platform Mobile Engineer 
 @ konfío.mx @ddinorahtovar @ddinorahtovar 

But first, lifecycles 

Everything has some type of lifecycle @ddinorahtovar 
 General Application Activity Fragment •Defines an object that has an Android Lifecycle Classes 

@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) 

@Composable @ddinorahtovar •Composable functions works different, they emit data @Composable fun view(data: Int) data: Int Composition emit 

States and recomposition 

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 

States @ddinorahtovar •Holds a value (Can be read and updated) interface State •The current RecomposeScope will be subscribed to changes of that value 

States @ddinorahtovar interface MutableState : State { override var value: T } •mutableStateOf creates an observable MutableState, which is an observable type integrated with the compose runtime. 

Init composition vs recomposition @ddinorahtovar First Interaction Composition Insert “A” Insert “B” Second Interaction Re-composition 

Compose @ddinorahtovar •The composition is the state maintained by the memory Composition 
 Slot Table Composer Compose Runtime 

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 

Slot table @ddinorahtovar Composition 
 Slot Table Composer Compose Runtime •Current state of the Composition •Updates with every composition •Gap Buffer - data structure •Positional Memorization 

Slot table @ddinorahtovar Unused Used B Used A Internal array Gap Collection Emit Composition 
 Slot Table Composer Compose Runtime Collect B Collect A 

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>( 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 ) } 

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>( 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 ) } 

Composer @ddinorahtovar Composition 
 Composer Compose Runtime Slot Table @Composable inline fun > ReusableComposeNode( noinline factory: () -> T, update: @DisallowComposableCalls Updater.() -> Unit, content: @Composable () -> Unit ) { if (currentComposer.applier !is E) invalidApplier() currentComposer.startReusableNode() if (currentComposer.inserting) { currentComposer.createNode(factory) } else { currentComposer.useNode() } currentComposer.disableReusing() Updater(currentComposer).update() currentComposer.enableReusing() content() 

Recompose and Remember 

Scopes for recomposition @ddinorahtovar •The composition is the state maintained by the memory 🧠 

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 

Remember @ddinorahtovar @Composable fun View() { val value = remember { mutableStateOf("") } var someValue by remember { mutableStateOf("") } val (someOtherValue, setValue) = remember { mutableStateOf("") } } 

Remember @ddinorahtovar @Composable inline fun remember(calculation: @DisallowComposableCalls () -> T): T = currentComposer.cache(false, calculation) @Composable fun View() { var variable by remember { mutableStateOf("") } } 

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 { } 

Remember @ddinorahtovar •So this save us from activity recreation? •Short answer: No 

RememberSaveable @ddinorahtovar @Composabke fun View() { var variable = rememberSaveable { mutableStateOf("") } } 

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

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 } 

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() 

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 } 

State hosting @ddinorahtovar 
 Decoupling @Composable fun View() @Composable fun View() @Composable fun ViewContent() Unidirectional Data Flows 

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 😅 

State Holders @ddinorahtovar @Composable State Holder ViewModel/ Presenters Access to 
 Logic UI component state UI component Composition 

State Holders @ddinorahtovar @Composable are in charge of emi tt ing UI elements State holder only contains the UI logic and state 

StateFlow and SharedFlow collection 

SharedFlow and StateFlow @ddinorahtovar 

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 

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" 

repeatOnLifecycle() @ddinorahtovar Safe collection Using a lib 
 repeatOnLifecycle() flowWithLifecycle() private fun setObservables() = lifecycleScope.launch { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { viewModel.uiHomeState.collect { // Safe collect } } } 

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 } } } 

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 } } } 

Under the hood of: repeatOnLifecycle() @ddinorahtovar try { suspendCancellableCoroutine { cont -> val startWorkEvent = Lifecycle.Event.upTo(state) val cancelWorkEvent = Lifecycle.Event.downFrom(state) observer = LifecycleEventObserver { _, event -> if (event == startWorkEvent) { launchedJob = [email protected](block = block) return@LifecycleEventObserver } if (event == cancelWorkEvent) { launchedJob ?. cancel() launchedJob = null } if (event == Lifecycle.Event.ON_DESTROY) { cont.resume(Unit) } } [email protected](observer as LifecycleEventObserver) } } finally { ?. 

== launchedJob = [email protected](block = block) return@LifecycleEventObserver } if (event == cancelWorkEvent) { launchedJob ? . cancel() launchedJob = null } if (event == Lifecycle.Event.ON_DESTROY) { cont.resume(Unit) } } [email protected](observer as LifecycleEventObserver) } } finally { launchedJob ?. cancel() observer ?. let { [email protected](it) } } Under the hood of: repeatOnLifecycle() @ddinorahtovar 

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 } } } 

flowWithLifecycle() @ddinorahtovar lifecycleScope.launch { viewModel.state .flowWithLifecycle(this, Lifecycle.State.STARTED).collect { // Safe collect } } Safe collection Using a lib 
 repeatOnLifecycle() flowWithLifecycle() 

Under the hood of: flowWithLifecycle() @ddinorahtovar @OptIn(ExperimentalCoroutinesApi : : class) public fun Flow.flowWithLifecycle( lifecycle: Lifecycle, minActiveState: Lifecycle.State = Lifecycle.State.STARTED ): Flow = callbackFlow { lifecycle.repeatOnLifecycle(minActiveState) { [email protected] { send(it) } } close() } 

Under the hood of: flowWithLifecycle() @ddinorahtovar @OptIn(ExperimentalCoroutinesApi : : class) public fun Flow.flowWithLifecycle( lifecycle: Lifecycle, minActiveState: Lifecycle.State = Lifecycle.State.STARTED ): Flow = callbackFlow { lifecycle.repeatOnLifecycle(minActiveState) { [email protected] { 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 

Under the hood of: flowWithLifecycle() @ddinorahtovar @OptIn(ExperimentalCoroutinesApi : : class) public fun Flow.flowWithLifecycle( lifecycle: Lifecycle, minActiveState: Lifecycle.State = Lifecycle.State.STARTED ): Flow = callbackFlow { lifecycle.repeatOnLifecycle(minActiveState) { [email protected] { send(it) } } close() } 

Collecting flows in @Composables @ddinorahtovar @Composable fun View(someFlow: Flow) { val lifecycleOwner = LocalLifecycleOwner.current val flowWithLifecycleAware = remember(someFlow, lifecycleOwner) { someFlow.flowWithLifecycle(lifecycleOwner.lifecycle, Lifecycle.State.STARTED) } val yourValueThatChange by flowWithLifecycleAware.collectAsState() // Your Composable component } 

Give it a try! 

Hosting states in Compose Dinorah Tovar Google Developer Expert Platform Mobile Engineer 
 @ konfío.mx @ddinorahtovar @ddinorahtovar