Mastering Recompositions in Compose

One of the greatest fears we face when we start with Compose is the difficulty of understanding how the recomposition system works: when Compose repaints the screen.

In general, it is an unfounded fear, as the system works very well on its own, but there are situations where we may encounter serious performance issues.

In this talk, we will see:

- What a recomposition really is
- How the recomposition system works
- How to detect problems
- What strategies to follow to solve those problems

Transcript

1. Mastering Recompositions in Compose
2. Mastering Recompositions in Compose 1. ­ How Compose works
3. Mastering Recompositions in Compose 1. ­ How Compose works 2. ­ Recomposition
4. Mastering Recompositions in Compose 1. ­ How Compose works 2. ­ Recomposition 3. ­ Debugging
5. Mastering Recompositions in Compose 1. ­ How Compose works 2. ­ Recomposition 3. ­ Debugging 4. ­ Problems and solutions
6. 1. How Compose works
7. UiState( user = "user", pass = "pass", buttonEnabled = true ) user pass CLICK HERE
8. buttonEnabled = false UiState( 1 user = "user", 2 pass = "pass", 3 4 ) 5 user pass CAN'T CLICK
9. The biggest challenge Updating the UI without redrawing the whole screen
10. How Jetpack Compose works
11. How Jetpack Compose works ­ Specific implementation of interface declarative paradigm
12. How Jetpack Compose works ­ Specific implementation of interface declarative paradigm ­ Widgets in screen are functions
13. How Jetpack Compose works ­ Specific implementation of interface declarative paradigm ­ Widgets in screen are functions ­ Widgets are stateless
14. How Jetpack Compose works ­ Specific implementation of interface declarative paradigm ­ Widgets in screen are functions ­ Widgets are stateless ­ State provided by function arguments
15. @Composable fun MoviesList( val title: String, val movies: List<Movie> ) { // Implementation } When state changes, UI is redrawn Otherwise, redrawing should be skipped
16. Three phases Data Composition Layout Drawing UI
17. Composition Taken from Android Developers blog
18. Layout Taken from Android Developers blog
19. Drawing Taken from Android Developers blog
20. 2. Recomposition
21. Composable Lifecycle
22. When is the state changed?
23. When is the state changed? ­ It's hard to reason about it
24. When is the state changed? ­ It's hard to reason about it ­ Algorithm is confusing
25. When is the state changed? ­ It's hard to reason about it ­ Algorithm is confusing ­ It sometimes go against logic
26. When is the state changed? ­ It's hard to reason about it ­ Algorithm is confusing ­ It sometimes go against logic What does it mean that state is changed?
27. Stability If State is stable -> Compose can skip recompositions
28. When is a state stable?
29. When is a state stable? ­ All primitive types: Boolean, Int, Long, Float, Char...
30. When is a state stable? ­ All primitive types: Boolean, Int, Long, Float, Char... ­ Strings
31. When is a state stable? ­ All primitive types: Boolean, Int, Long, Float, Char... ­ Strings ­ All functional types (lambdas)
32. When is a state stable? ­ All primitive types: Boolean, Int, Long, Float, Char... ­ Strings ­ All functional types (lambdas) ­ Immutable classes using previous types
33. A stable class data class Movie( val id: Int, val title: String, val description: String )
34. When is a state unstable? Almost any other case:
35. When is a state unstable? Almost any other case: ­ Collections are not stable
36. When is a state unstable? Almost any other case: ­ Collections are not stable ­ Mutable classes
37. When is a state unstable? Almost any other case: ­ Collections are not stable ­ Mutable classes ­ All classes from modules where Compose compiler is not run
38. An unstable class data class Movie( val id: Int, val title: String, var description: String )
39. An unstable class var description: String data class Movie( 1 val id: Int, 2 val title: String, 3 4 ) 5
40. An unstable Composable @Composable fun MoviesList( val title: String, val movies: List<Movie> ) { // Implementation }
41. An unstable Composable val movies: List<Movie> @Composable 1 fun MoviesList( 2 val title: String, 3 4 ) { 5 // Implementation 6 } 7
42. 3. Debugging
43. Find the problem Layout Inspector
44. Find the problem Layout Inspector
45. Find the reason Stability reports Generates reports in build time Classes Composables
46. Stability reports - Configuration kotlinOptions { val composeReportsDir = "compose_reports" freeCompilerArgs += listOf( "-P", "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" + project.layout.buildDirectory.get().dir(composeReportsDir).asFile.absolutePath, "-P", "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" + project.layout.buildDirectory.get().dir(composeReportsDir).asFile.absolutePath, ) }
47. Classes report Stable class stable class Movie { stable val id: Int stable val title: String stable val overview: String stable val releaseDate: String stable val poster: String stable val backdrop: String? stable val originalTitle: String stable val originalLanguage: String stable val popularity: Double stable val voteAverage: Double stable val isFavorite: Boolean <runtime stability> = Stable }
48. Classes report Unstable class unstable class UiState { stable val loading: Boolean unstable val movies: List<Movie> <runtime stability> = Unstable }
49. Composables report Skippable composable restartable skippable scheme("[androidx.compose.ui.UiComposable]") fun MovieDetail( stable movie: Movie stable modifier: Modifier? = @static Companion )
50. Composables report Unskippable composable restartable scheme("[androidx.compose.ui.UiComposable]") fun ErrorText( unstable error: Throwable stable modifier: Modifier )
51. 4. Problems and Solutions
52. 4. Problems and Solutions 1. Unstable class 2. External unstable class 3. Lambdas 4. LazyList 5. Columns 6. State continuously changing 7. Modifiers
53. 1. Unstable class data class Contact(var name: String)
54. 1. Unstable class @Stable 1 data class Contact(var name: String) 2
55. 2. External unstable class Collections, Other modules, 3rd party libraries Option 1: Stable wrapper @Stable class ListWrapper { val movies: List<Movie> }
56. 2. External unstable class Collections, Other modules, 3rd party libraries Option 2 (recommended): Stability config file // stability-config.txt kotlin.collections.* kotlin.Throwable
57. kotlinOptions { freeCompilerArgs += listOf( "-P", "plugin:androidx.compose.compiler.plugins.kotlin:stabilityConfigurationPath=" + "$rootDir/stability-config.txt" ) }
58. 3. Lambdas Lambdas are stable But they're not memoized (remembered) by default Only if scope is stable
59. 3. Lambdas @Composable fun MoviesScreen() { val viewModel = viewModel { MoviesViewModel() } val state by viewModel.state.collectAsState() MoviesListWithButton( movies = state.movies, onButtonClick = { viewModel.onAddMovie() }, onMovieClick = { viewModel.onMovieClick() }, ) }
60. 3. Lambdas val viewModel = viewModel { MoviesViewModel() } onButtonClick = { viewModel.onAddMovie() }, onMovieClick = { viewModel.onMovieClick() }, @Composable 1 fun MoviesScreen() { 2 3 val state by viewModel.state.collectAsState() 4 5 MoviesListWithButton( 6 movies = state.movies, 7 8 9 ) 10 } 11
61. 3. Lambdas Option 1: function reference val viewModel = viewModel { MoviesViewModel() } onButtonClick = viewModel::onAddMovie, onMovieClick = viewModel::onMovieClick, @Composable 1 fun MoviesScreen() { 2 3 val state by viewModel.state.collectAsState() 4 5 MoviesListWithButton( 6 movies = state.movies, 7 8 9 ) 10 } 11
62. 3. Lambdas Option 2: Manual memoization val onAddMovie = remember(viewModel) {{ viewModel.onAddMovie() }} val onMovieClick = remember(viewModel) {{ viewModel.onMovieClick() }} onButtonClick = onAddMovie, onMovieClick = onMovieClick, 1 2 3 MoviesListWithButton( 4 movies = state.movies, 5 6 7 ) 8
63. 4. LazyColumn LazyColumn { items(movies) { MovieItem(movie = it) } }
64. 4. LazyColumn items(movies, key = { it.id }) { LazyColumn { 1 2 MovieItem(movie = it) 3 } 4 } 5
65. 5. Column Column { for (movie in movies) { MovieItem(movie) } }
66. 5. Column key(movie.id) { } Column { 1 for (movie in movies) { 2 3 MovieItem(movie) 4 5 } 6 } 7
67. 6. State continously changing val showScrollToTop = lazyState.firstVisibleItemIndex > 0
68. 6. State continously changing val showScrollToTop = lazyState.firstVisibleItemIndex > 0 👇 val showScrollToTop by remember { derivedStateOf { lazyState.firstVisibleItemIndex > 0 } }
69. 7. Defer reads from composition to layout var sliderValue by remember { mutableFloatStateOf(0f) } Column { Slider(value = sliderValue, onValueChange = { sliderValue = it }) RedBall(offset = sliderValue * 200) }
70. 7. Defer reads from composition to layout RedBall(offset = sliderValue * 200) var sliderValue by remember { mutableFloatStateOf(0f) } 1 Column { 2 Slider(value = sliderValue, onValueChange = { sliderValue = it }) 3 4 } 5
71. 7. Defer reads from composition to layout fun RedBall(offset: Float) { .offset(offset.dp) @Composable 1 2 Box( 3 modifier = Modifier 4 5 .size(56.dp) 6 ) 7 } 8
72. 7. Defer reads from composition to layout fun RedBall(offset: () -> Float) { .offset { IntOffset(offset().toInt(), 0) } @Composable 1 2 Box( 3 modifier = Modifier 4 5 .size(56.dp) 6 ) 7 } 8
73. 7. Defer reads from composition to layout RedBall(offset = { sliderValue * 200 })
74. What about the future?
75. What about the future? 💪 Strong Skipping Mode
76. Strong Skipping Mode Skippable Composables with unstable parameters Unstable parameters 👉 Compared by reference (===) Stable parameters 👉 Compared by equals() (==) All lambdas are memoized (remember) Even in unstable scopes
77. Strong Skipping Mode Requirements: Compose Compiler: 1.5.4+ Compose Runtime: =1.7.0+= (currently in beta) Requires opt-in
78. TLDR; Don't do premature optimization If there's a performance problem, debug: Layout inspector Stability report Future: use new recomposition system
79. Bibliography (1/2) 📄 (Android Developers) 📄 (Android Developers) 📄 (Android Developers) 📄 (Phat Nguyen) 📄 (Vinay Gaba) 📄 (Justin Breitfeller) 📄 (Ben Trengrove) 📄 (Francesc Vilarino) Thinking in Compose Lifecycle of Compose Jetpack Compose Performance Debugging the recomposition in Jetpack Compose What is “donut-hole skipping” in Jetpack Compose? Gotchas in Jetpack Compose Recomposition Jetpack Compose: Strong Skipping Mode Explained Exploring Jetpack Compose Compiler’s Stability Config
80. Bibliography (2/2) 📄 (Ben Trengrove) 💬 (Leland Richardson) 🎥 (Android Developers 🎥 (Android Developers) 🎥 (Philipp Lackner) 🎥 (Philipp Lackner) Jetpack Compose Stability Explained Reddit answer about unstable lambdas Jetpack Compose: Debugging recomposition From data to UI: Compose phases - MAD Skills Performance Optimization with @Stable and @Immutable in Jetpack Compose I Bet You DON'T Know These 3 Performance Optimizations for your Jetpack Compose UI