Optimising UI in Jetpack Compose | Android Worldwide October 23

Jetpack Compose is now really popular for UI development in Android. However, declarative UI is still a very new and a nuanced topic among Android developers.
Most of the developers are confused about how to write an optimized UI with Jetpack Compose, and lots of developers make mistakes on state management, passing parameters, and recomposing leading to having a slower, non-performant app on production. On the other hand, few developers fall into the rabbit hole of over-optimizing recomposition.
In this talk, we'll see how to improve the performance of your UI in Jetpack Compose, we'll learn about various APIs provided by the Jetpack Compose team to reduce unnecessary recomposition, we'll also learn handling lists in Compose and lastly, we'll learn about static analysis tools with Jetpack Compose, how to use them and some best practices.
This talk will cover
- Gap Buffer and Composer
- What's Composable
- What's Recomposition, how to optimise for it, and how not to over optimise for it
- Breaking down Composables
- Side Effects
- How remember works
- Working with Lists - kotlinx.immutablecollections
- suggestions on optimised state management
- @Stable and @Immutable annotations

Transcript

1. Optimizing UI in Jetpack Compose Rivu Chakraborty 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social https://courses.rivu.dev/ AndroidWorldwide
2. • India’s first GDE (Google Developer Expert) for Kotlin • More than decade in the Industry • Mobile Architect @ JioCinema • Previously ◦ Byju’s ◦ Paytm ◦ Gojek ◦ Meesho • Author (wrote multiple Kotlin books) • Speaker • Mentor • Community Person • YouTuber (?) 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Who am I? 󰞦
3. What’s @Composable
4. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s @Composable? 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Not an annotation processor
5. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s @Composable? Not an annotation processor Works similar to suspend keyword
6. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s @Composable? @Composable fun BlueText() { Text( text = "https://www.youtube.com/@rivutalks", color = Color.Blue ) } fun BlueText($composer: Composer) { $composer.start(123) Text( text = "https://www.youtube.com/@rivutalks", color = Color.Blue ) $composer.end() }
7. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s @Composable? @Composable fun RecompositionScreen(viewModel: RecompositionViewModel) { val recomposeState = viewModel.state Column { Text(text = "Recomposition count ${recomposeState.count}") Button(onClick = { viewModel.recompose() }) { Text(text = "Recompose") } } }
8. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s @Composable? fun RecompositionScreen($composer: Composer, viewModel: MyViewModel) { $composer.start(123) val recomposeState = viewModel.state Column { Text(text = "Recomposition count ${recomposeState.count}") Button(onClick = { viewModel.recompose() }) { Text(text = "Recompose") } } $composer.end() }
9. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s Composer? A calling context object, responsible for rendering (composing/recomposing) Composables. The implementation contains a data-structure closely related to Gap Buffer.
10. Recomposition
11. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s Recomposition Recursion with updated parameters
12. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s Recomposition fun BlueText($composer: Composer) { $composer.start(123) Text( text = "https://www.youtube.com/@rivutalks", color = Color.Blue ) $composer.end()?.updateScope { nextComposer -> BlueText(nextComposer) } }
13. Phases of Compose
14. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social 3 Phases of Compose Composition Layout Drawing
15. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Composition https://developer.android.com/jetpack/compose/phases
16. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Composition https://developer.android.com/jetpack/compose/phases
17. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Layout https://developer.android.com/jetpack/compose/phases
18. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Drawing https://developer.android.com/jetpack/compose/phases
19. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Phased State Reads https://developer.android.com/jetpack/compose/phases
20. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Recomposition loop @Composable fun AutoResizeText( modifier: Modifier = Modifier, text: String, style: TextStyle, targetTextSize: TextUnit = style.fontSize, maxLines: Int = 1, ) { var textSize by remember { mutableStateOf(targetTextSize) } Text( modifier = modifier, text = text, fontSize = textSize, //... maxLines = maxLines, overflow = TextOverflow.Ellipsis, onTextLayout = { textLayoutResult -> val maxCurrentLineIndex: Int = textLayoutResult.lineCount - 1 if (textLayoutResult.isLineEllipsized(maxCurrentLineIndex)) { textSize = textSize.times(TEXT_SCALE_REDUCTION_INTERVAL) } }, ) }
21. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Recomposition loop @Composable fun AutoResizeText( modifier: Modifier = Modifier, text: String, style: TextStyle, targetTextSize: TextUnit = style.fontSize, maxLines: Int = 1, ) { var textSize by remember { mutableStateOf(targetTextSize) } Text( modifier = modifier, text = text, fontSize = textSize, //... maxLines = maxLines, overflow = TextOverflow.Ellipsis, onTextLayout = { textLayoutResult -> val maxCurrentLineIndex: Int = textLayoutResult.lineCount - 1 if (textLayoutResult.isLineEllipsized(maxCurrentLineIndex)) { textSize = textSize.times(TEXT_SCALE_REDUCTION_INTERVAL) } }, ) }
22. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Recomposition loop @Composable fun AutoResizeText( modifier: Modifier = Modifier, text: String, style: TextStyle, targetTextSize: TextUnit = style.fontSize, maxLines: Int = 1, ) { var textSize by remember { mutableStateOf(targetTextSize) } Text( modifier = modifier, text = text, fontSize = textSize, //... maxLines = maxLines, overflow = TextOverflow.Ellipsis, onTextLayout = { textLayoutResult -> val maxCurrentLineIndex: Int = textLayoutResult.lineCount - 1 if (textLayoutResult.isLineEllipsized(maxCurrentLineIndex)) { textSize = textSize.times(TEXT_SCALE_REDUCTION_INTERVAL) } }, ) }
23. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Recomposition loop
24. Breaking Down Composables
25. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social A Screen
26. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social An Overloaded Composable Function @Composable fun ProfileScreenOverloaded( profileData: ProfileData, postsList: List<Post>, modifier: Modifier = Modifier ) { LazyVerticalGrid( modifier = modifier, columns = GridCells.Fixed(2) ) { item(span = { GridItemSpan(2) }) { Column { AsyncImage( model = profileData.profileImageUrl, contentDescription = profileData.name, modifier = Modifier .size(128.dp) .align(Alignment.CenterHorizontally) .clickable { //Handle Profile Photo Click }, ) Text( text = profileData.name, style = MaterialTheme.typography.h2, modifier = Modifier .align(Alignment.CenterHorizontally), ) Text( text = profileData.location, style = MaterialTheme.typography.body1, modifier = Modifier .align(Alignment.CenterHorizontally), ) Button( onClick = { /*Follow Button Action*/ }, modifier = Modifier .align(Alignment.CenterHorizontally) .background(Color.Black), ) { Text( text = "Follow ${profileData.name}", style = MaterialTheme.typography.body2, ) } Button( onClick = { /*Message Button Action*/ }, modifier = Modifier .align(Alignment.CenterHorizontally) .border(1.dp, color = Color.Black, shape = RoundedCornerShape(5.dp)), ) { Text( text = "Message", style = MaterialTheme.typography.body1, ) } } } items(postsList) { AsyncImage( model = profileData.profileImageUrl, contentDescription = profileData.name, modifier = Modifier .width(167.dp).height(220.dp) .clickable { //Handle Post Photo Click }, ) } } }
27. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Breaking it down @Composable fun ProfileScreen( profileData: ProfileData, postsList: List<Post>, modifier: Modifier = Modifier ) { LazyVerticalGrid( modifier = modifier, columns = GridCells.Fixed(2) ) { item(span = { GridItemSpan(2) }) { ProfileSection(profileData) } items(postsList) { PostItem(post = it) } } }
28. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Breaking it down @Composable fun ProfileSection( profileData: ProfileData, modifier: Modifier = Modifier ) { Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) { ProfilePhoto( profileImageUrl = profileData.profileImageUrl, contentDesc = profileData.name, profileId = profileData.profileId) Text( text = profileData.name, style = Typography.titleMedium, ) Text( text = profileData.location, style = Typography.bodyMedium, ) FollowButton( profileId = profileData.profileId, name = profileData.name) MessageButton(profileId = profileData.profileId) } }
29. State Hoisting
30. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s State? data class MoviesState( val query: String = emptyString(), val movies: List<Movie> = listOf(), val error: Throwable? = null, val isLoading: Boolean = false, val detail: MovieDetail? = null, val searchHistory: List<String> = emptyList(), val skipSplash: Boolean = false )
31. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What’s State? data class MoviesState( val query: String = emptyString(), val movies: List<Movie> = listOf(), val error: Throwable? = null, val isLoading: Boolean = false, val detail: MovieDetail? = null, val searchHistory: List<String> = emptyList(), val skipSplash: Boolean = false ) val moviesState: MoviesState by stateLiveData.observeAsState(initialState())
32. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social State Hoisting Having UI logic and UI element state in composables is a good approach if the state and logic are simple. You can leave your state internal to a composable or hoist as required.
33. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social State Hoisting @Composable fun ShowList( state: ListState.Content, modifier: Modifier = Modifier, onRefresh: () -> Unit = {}, ) { val swipeRefreshState = rememberPullRefreshState(refreshing = state.isRefreshing, onRefresh = onRefresh) Box(modifier = modifier.pullRefresh(swipeRefreshState)) { LazyColumn( modifier = Modifier.matchParentSize(), ) { ... } } }
34. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social State Hoisting fun FormScreen(viewModel: FormViewModel) { val state = viewModel.state var addItemQuery by remember { mutableStateOf("") } LaunchedEffect(key1 = addItemQuery) { ... } Column { Text(text = "Add form items below") if (state is MyFormState.Content) { MyForm( state = state, onAddItem = { details -> addItemQuery = details }, onUpdateItem = { position, item -> viewModel.updateItem(position, item) }, shouldShowAddItem = true, ) } } }
35. Side Effects and Where to use Them
36. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social What are Side Effects? A side-effect is a change to the state of the app that happens outside the scope of a composable function. Due to composables' lifecycle and properties such as unpredictable recompositions, executing recompositions of composables in different orders, or recompositions that can be discarded, composables should ideally be side-effect free.
37. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social LaunchedEffect @Composable fun FormScreen(viewModel: FormViewModel) { val state = viewModel.state var addItemQuery by remember { mutableStateOf("") } LaunchedEffect(key1 = addItemQuery) { if (addItemQuery.isBlank()) return@LaunchedEffect delay(500) viewModel.addItem( MyFormItem(addItemQuery) ) }
38. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social DisposableEffect @Composable fun ListScreen(viewModel: ListViewModel) { val state = viewModel.myListState Log.d(LogTag, "ListScreen Composed") DisposableEffect(key1 = Unit) { val job = viewModel.loadItems() onDispose { job.cancel() } } ... }
39. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social SideEffect @Composable fun rememberFirebaseAnalytics(user: User): FirebaseAnalytics { val analytics: FirebaseAnalytics = remember { FirebaseAnalytics() } SideEffect { analytics.setUserProperty("userType", user.userType) } return analytics }
40. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social LaunchedEffect val text = when (state.value) { is State.Loading -> "Loading" is State.NotLoggedIn -> { logout() "" } is State.Success -> {...} } Don’t Do
41. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social LaunchedEffect Do var isLogout by remember { mutableStateOf(state.value is State.NotLoggedIn) } LaunchedEffect(key1 = isLogout) { if (isLogout) { onLogout() } } val text = when (state.value) { is State.Loading -> "Loading" is State.NotLoggedIn -> "" is State.Success -> "..." }
42. remember
43. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social remember @Composable fun ShowList( state: ListState.Content, modifier: Modifier = Modifier, onRefresh: () -> Unit = {}, ) { val sortedItems = state.items.let { Log.d(LogTag, "Sorted") it.sortedBy { it.itemId }.toImmutableList() } ... }
44. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social remember @Composable fun ShowList( state: ListState.Content, modifier: Modifier = Modifier, onRefresh: () -> Unit = {}, ) { Log.d(LogTag, "List Composed isRefreshing ${state.isRefreshing}") val sortedItems by remember(state.items) { mutableStateOf( state.items.let { Log.d(LogTag, "Sorted") it.sortedBy { it.itemId }.toImmutableList() } ) } ... }
45. @Stable and @Immutable
46. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social @Stable Stable is used to communicate some guarantees to the compose compiler about how a certain type or function will behave.
47. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social @Immutable Immutable can be used to mark class as producing immutable instances. The immutability of the class is not validated and is a promise by the type that all publicly accessible properties and fields will not change after the instance is constructed. This is a stronger promise than val as it promises that the value will never change not only that values cannot be changed through a setter.
48. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social @Immutable @Immutable data class MyListItem( val itemId: Int, val itemColor: Color, val backgroundColor: Color )
49. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social @Stable @Stable data class MyListItem( val itemId: Int, val itemColor: Color, var backgroundColor: Color by mutableStateOf(Color.Blue) )
50. ImmutableList
51. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social ImmutableList @Composable fun ShowList( state: ListState.Content, modifier: Modifier = Modifier, onRefresh: () -> Unit = {}, ) { val sortedItems by remember(state.items) { mutableStateOf( state.items.let { Log.d(LogTag, "Sorted") it.sortedBy { it.itemId }.toImmutableList() } ) } ... }
52. Checking Performance
53. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Layout Inspector
54. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Compiler Metrics https://patilshreyas.github.io/compose -report-to-html/ Generate Compiler Metrics in HTML and Take Actions
55. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Generate Compiler Metrics plugins { id 'com.android.application' id 'org.jetbrains.kotlin.android' id "dev.shreyaspatil.compose-compiler-report-gener ator" version "1.1.0" } ./gradlew :app:releaseComposeCompilerHtmlReport
56. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Analyse Compiler Metrics
57. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Analyse Compiler Metrics
58. 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social Analyse Compiler Metrics
59. Resources • https://developer.android.com/jetpack/compose/state • https://github.com/androidx/androidx/blob/androidx-main/compose/docs/ compose-component-api-guidelines.md#last-updated-july-19-2023 • https://youtube.com/@rivutalks • https://courses.rivu.dev
60. Thank You Rivu Chakraborty 🌐https://www.rivu.dev/ youtube.com/@rivutalks @rivuchakraborty @rivu@androiddev.social https://courses.rivu.dev/ AndroidWorldwide