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
   

   View Slide

2. Handling State
   Jetpack Compose
   

   View Slide

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.
   

   View Slide

4. Why?
   - Android View framework is imperative.
   

   View Slide

5. Why?
   - Compose is declarative.
   - You update the UI by calling the same composable with new values.
   

   View Slide

6. A little code!
   

   View Slide

7. State
   - State is an observable value holder.
   - Composable function read the value from this container and subscribe to the changes of the
   value read.
   - MutableState 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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

10. Let’s store count variable
    val count = remember{ mutableStateOf(0)}
    When you run the app, and click button, count text is still updated.
    

    View Slide

11. rememberSavable api
    - rememberSavable Api makes state to survive configuration changes and
    process death.
    - rememberSavable saves values in a Bundle instance.
    

    View Slide

12. Let’s persist count variable
    val count = rememberSavable{ mutableStateOf(0)}
    When you rotate the screen, count value is preserved.
    

    View Slide

13. Stateless Composables, why?
    - Single source of truth
    - Reusability
    - Shareable state
    - Easier to test
    

    View Slide

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.
    

    View Slide

15. A little code!
    

    View Slide

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

    View Slide

17. Smart Recomposition
    - Recomposition skips as much as possible.
    - It’ll only invalidate part of the UI whose state was changed.
    

    View Slide

18. A little code!
    

    View Slide

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!
    

    View Slide

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
    /
    

    View Slide