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

State Management in Jetpack Compose

State Management in Jetpack Compose

Bhoomi Vaghasiya Gadhiya

September 25, 2023
Tweet

More Decks by Bhoomi Vaghasiya Gadhiya

Other Decks in Programming

Transcript

  1. Who Am I? 󰟲 • Android Developer - Freelancer •

    Technical Blogger : Medium @bhoomivaghasiya • Technical Author of Jetpack Compose Course • Technical Speaker in community • Empowering Women In Tech
  2. What is State? • State is any value in the

    app that can change. • Examples: ◦ Whether to show a button or not based on some condition. ◦ Result of fetching the data : Loading, Error, Success. ◦ Error message when user enters invalid message.
  3. Recomposition @Composable fun DisplayName(name: String) { Text(text = "Hello, $name!")

    } Initial Composition @Composable fun DisplayName(name: String) { Text(text = "Hello, $name!") } Name Changes ReComposition
  4. What is Recomposition? • Whenever state is updated, recomposition takes

    place. • Only way to update UI, calling same composable with new argument.
  5. What is Recomposition? • Whenever state is updated, recomposition takes

    place. • Only way to update UI, calling same composable with new argument. • Only rebuild part of UI
  6. Remember @Composable fun Detail(name: String) { val someClass = SomeClass()

    Text(name) } Without Remember With Remember @Composable fun Detail(name: String) { val someClass = remember{SomeClass()} Text(name) } val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@222 SomeClass@333 val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@111 SomeClass@111
  7. How to create State? var enabled by remember { mutableStateOf(true)

    } Retain the data during recomposition Store the latest value
  8. Stateful vs Stateless Composables @Composable fun Counter() { var count

    by remember { mutableStateOf(0) } Text("Count: $count") Button(onClick = { count++ }) { Text("Increment") } } Stateful Composable Stateless Composable @Composable fun Counter(count: Int, onIncrement: () +> Unit){ Text("Count: $count") Button(onClick = onIncrement) { Text("Increment") } }
  9. What is State Hositing? • State Hoisting is a pattern

    that moves the state from composable to its caller.
  10. What is State Hositing? • State Hoisting is a pattern

    that moves the state from composable to its caller. • Make Composable Stateless
  11. How to do State Hositing? • Create a state variable

    in the parent composable and pass it to the child composable as a parameter. ◦ value : the current value of state ◦ onValueChange : an event that requests the value to change.
  12. How to do State Hoisting? @Composable fun StatefulComposable() { var

    count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Clicked $count times") } } @Composable fun StatelessCounter(count: Int, onCountChange :() +> Unit) { Button(onClick = onCountChange) { Text("Clicked $count times") } } @Composable fun StatefulComposable() { var count by remember { mutableStateOf(0) } StatelessCounter(count, {count++}) }
  13. Resources to learn Jetpack Compose • developer.android.com/jetpack/compose • github.com/android/compose-samples •

    github.com/android/nowinandroid • medium.com/androiddevelopers • youtube.com/c/AndroidDevelopers/videos Official Resources • composables.com • github.com/Gurupreet/ComposeCookBook • youtube.com/@CheezyCode • jetpackcompose.app Unofficial Resources