Recomposition Roundup: All You Need to Know Harun Wangereka

Jetpack Compose is a modern UI toolkit for Android, offers a declarative approach to UI development

Jetpack Compose Phases

Composition Layout Drawing Decides what UI to show Where to place the UI render the UI

No content

What is Recomposition?

Calling composable functions again with new data causes the function to be recomposed--the widgets emitted by the function are redrawn, if necessary, with new data. The Compose framework can intelligently recompose only the components that changed.

Why should you care?

● Improved performance ● Efficient & Predictable UI Updates

Practical smart recomposition tips

@Composable fun ColumnKeys() { Screen { var movies by remember { mutableStateOf(buildMovies(4)) } Scaffold( topBar = { TopBar("Column Keys") { RefreshAction { movies = movies.shuffled() } } } ) { padding -> Column( modifier = Modifier.padding(padding) ) { for (movie in movies) { key(movie.id) { MovieItem(movie = movie) } } } } } } Column Keys

@Composable fun DeferRead() { Screen { Scaffold( topBar = { TopBar("Defer Read") } ) { padding -> var sliderValue by remember { mutableFloatStateOf(0f) } Column( modifier = Modifier .padding(padding) .padding(horizontal = 16.dp) ) { Slider( value = sliderValue, onValueChange = { sliderValue = it } ) RedBall(offset = { sliderValue * 200 }) } } } } Deferred Reads

@Composable fun RedBall(offset: () -> Float) { Box( modifier = Modifier .offset { IntOffset(offset().toInt(), 0) } .size(56.dp) .clip(CircleShape) .background(Color.Red) ) } Deferred Read

LazyColumn( contentPadding = padding ) { items(movies, key = { it.id }) { MovieItem(movie = it) } } Lazy List Keys

@Stable data class Contact(var name: String) Stable State

Screen { Scaffold( topBar = { TopBar("Stable State") } ) { padding -> val contact = remember { Contact("John Doe") } var selected by remember { mutableStateOf(false) } Row( modifier = Modifier .fillMaxSize() .padding(padding), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { ContactDetail(contact) ToggleHeart( checked = selected, onCheckedChange = { selected = it } ) } } } Stable State

One Last Tip Derived State Topic: Edge-to-Edge

@Composable fun DerivedState() { val scope = rememberCoroutineScope() val lazyState = rememberLazyListState() val showScrollToTop by remember { derivedStateOf { lazyState.firstVisibleItemIndex > 0 }} Screen { Scaffold( topBar = { TopBar("Derived State") { if (showScrollToTop) { TopBarAction( imageVector = Icons.Default.KeyboardArrowUp, contentDescription = "Scroll to top", onClick = { scope.launch { lazyState.scrollToItem(0)}} ) } } } ) { padding -> LazyColumn( state = lazyState, contentPadding = padding ) { items(buildMovies(100), key = { it.id }) { MovieItem(movie = it) } } } } }

Provide unique keys, sp that Compose can efficiently update only the necessary items, minimizing the number of recompositions and improving performance. LazyList Keys Delay the reading of a state value until the layout or drawing phase, rather than during the composition phase Deferred read Efficiently derive state from other state values. Derived state use keys within a Column to optimize recomposition performance when dealing with dynamic lists Columns Keys Use of @Stable ensures that recomposition is optimized by avoiding unnecessary updates. Stable State In summary…

Composable functions that depend on results of other composables Don’t create depandable In compose functions because they can run in pararrel Avoid any side effects Move any logic from composables to ViewModels, Presenters etc Move any logic out Things to keep in mind

Thank you! Harun Wangereka