Handling State in Jetpack Compose

State in an app is any value that can change, like whether to show a button or not, the result of fetching data from a data source, and much more. In this session, we'll learn about state and composition. We'll look at state hoisting, and stable and unstable states.

Happy Composing!

Transcript

1. Beatrice Kinya Android Engineer @ Kyosk Digital Android Author @ kodeco.com @B__Kinya | Beatrice Kinya
2. Handling State Jetpack Compose
3. What? - State in an app is a value that can change - Examples - Result of fetching data from a data source: loading, error, success - Whether to show a button or not based on a condition - An error message when user enters invalid input. - Compose is declarative.
4. Why? - Android View framework is imperative.
5. Why? - Compose is declarative. - You update the UI by calling the same composable with new values.
6. A little code!
7. State<T> - State<T: Any> is an observable value holder. - Composable function read the value from this container and subscribe to the changes of the value read. - MutableState<T: Any> is a mutable value holder. - mutableStateOf(value: T, policy: …) creates a new instance of MutableState initialized with the value that’s passed to the function. - If the value changes, the composable function that had subscribed to the changes recomposes. - Recomposition is calling the composable functions again when input change, with the new value.
8. Update count variable val count = mutableStateOf(0) When you run the app, and click button, count text is still not updating. We’ll see why, shortly.
9. remember api - remember Api makes state to survive recomposition. - Value computed by remember during initial composition is stored in memory. - The value stored is returned during recomposition.
10. Let’s store count variable val count = remember{ mutableStateOf(0)} When you run the app, and click button, count text is still updated.
11. rememberSavable api - rememberSavable Api makes state to survive configuration changes and process death. - rememberSavable saves values in a Bundle instance.
12. Let’s persist count variable val count = rememberSavable{ mutableStateOf(0)} When you rotate the screen, count value is preserved.
13. Stateless Composables, why? - Single source of truth - Reusability - Shareable state - Easier to test
14. State hoisting - It is pattern of moving the state of a composable to the composables caller to make the composable stateless. - You move to the caller: - value:T : Current value displayed. - onValueChanged: (T) -> Unit : An event that requests the value to change, where T is the new value.
15. A little code!
16. Recomposition - Recomposition is calling the composable functions again when input change, with the new value. - RecomposeScope: Represents a recomposable scope or section of composition hierachy - Scope is a function not marked as inline and returns unit. - State<T: Any> is an observable value holder. - Composable function reads the value from this container. - The current RecomposeScope subscribes to the changes of that value. - When the value changes, recomposition of any subscribed RecomposeScope is scheduled.
17. Smart Recomposition - Recomposition skips as much as possible. - It’ll only invalidate part of the UI whose state was changed.
18. A little code!
19. Stable and Unstable States - Stable in compose means - The result of calls to equals will always be the same for the same two instances. - Composition is always notified when a public property of the annotated type changes. - All the public properties are primitives or types that are also stable. - There are data types that are considered stable: - All primitives - String - Unstable data types include: - var parameters - Collections classes: List, Set. - Should all composable be skippable: No!
20. Resources - Jetpack Compose stability explained: https://medium.com/androiddevelopers/jetpack-compose-stability-explai ned-79c10db270c8 - Jetpack Compose Debugging: https://io.google/2023/program/a3ed5302-d787-41bd-8623-54193d36caf0 /