State Management in Jetpack Compose

Transcript

1. State Management in Jetpack Compose Bhoomi Vaghasiya 📱Android Developer @bhoomivaghasiya @bhoomi_0104
2. Who Am I? 󰟲 • Android Developer - Freelancer • Technical Blogger : Medium @bhoomivaghasiya • Technical Author of Jetpack Compose Course • Technical Speaker in community • Empowering Women In Tech
3. Why Kotlin Over Java?
4. Evolution Of Android Development XML + Java XML + Kotlin Jetpack Compose In Kotlin
5. Jetpack Compose is entirely built in Kotlin
6. State Management
7. What is State? • State is any value in the app that can change.
8. 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.
9. What is Recomposition? • Whenever state is updated, recomposition takes place.
10. Recomposition @Composable fun DisplayName(name: String) { Text(text = "Hello, $name!") } Initial Composition @Composable fun DisplayName(name: String) { Text(text = "Hello, $name!") } Name Changes ReComposition
11. What is Recomposition? • Whenever state is updated, recomposition takes place. • Only way to update UI, calling same composable with new argument.
12. 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
13. 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
14. How to create State? var enabled by remember { mutableStateOf(true) } Retain the data during recomposition Store the latest value
15. 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") } }
16. GOAL? Make the Composable Stateless
17. State Hoisting
18. What is State Hositing? • State Hoisting is a pattern that moves the state from composable to its caller.
19. What is State Hositing? • State Hoisting is a pattern that moves the state from composable to its caller. • Make Composable Stateless
20. Why State Hositing? • Reusability
21. Why State Hositing? • Reusability • Debugging and Testability
22. Why State Hositing? • Reusability • Debugging and Testability • Single source of truth
23. Why State Hositing? • Reusability • Debugging and Testability • Single source of truth • Performance
24. 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.
25. 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++}) }
26. Parent Composable Child Composable State Event UniDirectional Data Flow
27. Then What?
28. That’s all!👏
29. 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
30. Thank you! Happy Kotlin Happy Composing🚀 Bhoomi Vaghasiya 📱Android Developer @bhoomivaghasiya @bhoomi_0104