Slide 1

Slide 1 text

Recomposition Roundup: All You Need to Know Harun Wangereka

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Jetpack Compose Phases

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

What is Recomposition?

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

Why should you care?

Slide 9

Slide 9 text

● Improved performance ● Efficient & Predictable UI Updates

Slide 10

Slide 10 text

Practical smart recomposition tips

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

@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) } } } } }

Slide 19

Slide 19 text

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…

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Thank you! Harun Wangereka