Efficiency with Jetpack Compose — Half 2 | by Udit Verma | June 2023

Each time a state modifications, the compose runtime triggers a reordering of the newest state can restart capabilities within the root UI tree. Ensures {that a} state is learn later within the UI tree, making certain {that a} smaller portion of the UI is reordered each time that state modifications.

@Composable
enjoyable ToDoItem(job: String) {
val isDone = keep in mind { mutableStateOf(false) }
Row {
Textual content(job)
CheckBox(isChecked = isDone, onCheckChange = { isDone = !isDone }
}
}

Within the instance above, any change within the isDone state will set off a ToDoItem reordering since it’s the closest skippable perform. Row is an inline cannot be ignored capabilities can even be reordered. The textual content can be ignored as a result of its (motion) state has not modified after which the checkbox can be reordered with the brand new state.

If the state is raised within the UI tree, we are able to use a lambda to wrap our state reads and cross this lambda to our youngster composable as an alternative of deferred state reads.

Let’s attempt to perceive this higher utilizing our instance. In our mum or dad composable ComposePerformanceScreen, we’ve scroll state for our scrollable column. This state is required by the subcompounds to

1. resolve the placement of ScrollPositionIndicator
2. toggle visibility of ScrollToTopButton

Let’s check out the log to confirm what might be aggregated to be rearranged each time the scroll state modifications.

The compositable grasp doesn’t depend on this state for its personal UI. This state is learn solely by the mum or dad which might be aggregated to cross on to its kids. If we are able to defer studying this state to sub-compilations, each time this state modifications, our mum or dad compile (ComposePerformanceScreen) will not should be recomposed. Strive wrapping the learn state in lambda capabilities and passing that lambda instead of the kid compilations.

Earlier than

@Composable
personal enjoyable ScrollPositionIndicator(
modifier: Modifier = Modifier,
progress: Float
) {}

@Composable
personal enjoyable ScrollToTopButton(
isVisible: Boolean,
modifier: Modifier = Modifier,
onClick: () -> Unit
) {}

Change these states to lambda

@Composable
personal enjoyable ScrollPositionIndicator(
modifier: Modifier = Modifier,
progress: () -> Float
) {}

@Composable
personal enjoyable ScrollToTopButton(
isVisible: () -> Boolean,
modifier: Modifier = Modifier,
onClick: () -> Unit
) {}

Now let’s attempt passing these lambdas from our mum or dad

ScrollPositionIndicator(progress = { scrollState.worth / (scrollState.maxValue * 1f) })

ScrollToTopButton(
isVisible = {
Logger.d(
message = "Recalculating showScrollToTopButton",
filter = LogFilter.ReAllocation
)
scrollState.worth / (scrollState.maxValue * 1f) > .5
},
onClick = {
scope.launch {
scrollState.scrollTo(0)
}
)

Nice, appears like we had been capable of wrap learn state inside lambda capabilities and they’re now successfully read-only inside subcomposables. Subsequently, each time the scroll state updates, the closest reordering vary is now the kid aggregates themselves. Strive reviewing the logs

Fairly! We not see the assertion “Recomposing total Display screen” which implies that the compositable mum or dad is not rearranged on scroll state change.

The supply code for this step might be accessed This.