Understanding Recomposition Performance Pitfalls

Understanding Recomposition
Performance Pitfalls
Andrei Shikov (he/him)

Compose @Google

@shikasd_
Jossi Wolf (he/him)

Compose @Google

@jossiwolf
compose

View Slide

Understanding
Performance

View Slide

Improve Monitor
Inspect
@shikasd_ @jossiwolf

View Slide

Related talks
We go further into the details of why
deferring reads of Compose state
works, learn about stability and how
Compose infers it, have a look at a
new API for reportFullyDrawn, and
more.
A holistic guide to app performance
with tips that apply to all Android
apps.
More performance tips for
Jetpack Compose
Modern App Performance

View Slide

Always test
performance in release
mode with R8 enabled
— Ben Trengrove, twice!

View Slide

Understanding
Recomposition

View Slide

@Composable fun Example() {

var counter by remember { mutableStateOf(0) }

Text(

modifier = Modifier.clickable { counter
++
},

text = "$counter"

)

}

View Slide

State
Recomposer
Composition records read
change

observed by
recomposes
setContent { … }

View Slide

State
Recomposer
change

observed by
recomposes
1
2
3

View Slide

State
Recomposer
change

observed by
recomposes

View Slide



Text(

++
},

text = "$counter"

)

}
state value gets accessed

View Slide

@Composable fun Example($composer: Composer,
...
) {

$composer.startRestartGroup(FunctionKey)

//
function body

$composer.endRestartGroup()

?.
updateScope { $composer
->

Example($composer,
...
)

}

}
Recompose scope

View Slide



Text(

++
},

text = "$counter"

)

}
state value read inside Example function
Composition will remember that.
?

View Slide

Recomposer
change

observed by
State
recomposes

View Slide

Recomposer
change

observed by
State
Composition
records read
recomposes

View Slide

State
change

observed by
recomposes
Composition
records read
Recomposer

View Slide



Text(

++
},

text = "$counter"

)

}
state value gets updated

View Slide

State
change

observed by
recomposes
Composition
records read
Recomposer

View Slide

State
recomposes
Composition
records read
Recomposer
modified in Snapshot observed by

View Slide

• State is backed by Snapshot 📷 system

• State changes in Snapshot are transactional and atomic (+ observers!)

• Recomposer observes state changes through Snapshot system

View Slide

State
change

observed by
recomposes
Composition
records read
Recomposer

View Slide

Composition
State
change

observed by
recomposes
records read
Recomposer

View Slide

...
) {


//
function body


?.
updateScope { $composer
->

Example($composer,
...
)

}

}
Recompose scope

View Slide



Text(

++
},

text = "$counter"

)

}
Composition DID remember that.
?
Recompose scope
state value gets accessed

View Slide

State
Recomposer
change

observed by
recomposes

View Slide

Understanding Recomposition
Performance

View Slide

@Composable

fun App() {

var scrollOffset by remember { mutableStateOf(0f) }

val scrollableState = rememberScrollableState(

onScroll = { delta
->

scrollOffset = maxOf(scrollOffset + delta, 0f)

delta

}

)

Column(Modifier.scrollable(scrollableState)) {

Header()

Content(showScrollToTop = scrollOffset > 0f)

Footer()

}

}

View Slide

Recomposer:recompose
App
Content
Frame #1 Frame #2
measure Recomposer:recompose
App
Content
measure
Other

View Slide

@Composable

fun App() {


val scrollableState = rememberScrollableState(

onScroll = { delta
->

scrollOffset = maxOf(scrollOffset + delta, 0f)

…

}

)


Header()


Footer()

}

}
state read!

View Slide

//
perf tip #1: defer State reads

View Slide

@Composable

fun App() {


...


Header()

Content(showScrollToTop = { scrollOffset > 0f })

Footer()

}

}

@Composable

fun Content(showScrollToTop: ()
->
Boolean) {

if (showScrollToTop()) { … }

}
//
perf tip #1: defer reads
state read! @shikasd_ @jossiwolf

View Slide

@Composable

fun App() {

var scrollOffset = remember { mutableStateOf(0f) }

...


Header()

Content(showScrollToTop = { scrollOffset > 0f })

Footer()

}

}

@Composable

fun Content(showScrollToTop: State) {

...

}
//
perf tip #2: defer reads
❌

View Slide

/ /
perf tip #2: extract State read out of composition

View Slide

Composition
Layout
Draw
//

View Slide


var state by remember { mutableStateOf(0) }

Text(

"$state"
//
read in composition

Modifier

.layout { measurable, constraints
->

. ..

. ..

}

.drawWithCache {

. ..

}

)

}
//

View Slide



Text(

"$state"
//
read in composition

Modifier

->

val size = IntSize(state, state)
//
read in layout

. ..

}

.drawWithCache {

. ..

}

)

}
//

View Slide



Text(

"$state"
//
read in composition

Modifier

->

val size = IntSize(state, state)
//
read in layout

}

.drawWithCache {

val color = state
//
read in draw

}

)

}
//

View Slide

Frame #1
measure measure
Other
Frame #2

View Slide

//
perf tip #3: Use derivedStateOf to reduce update frequency

View Slide

@Composable

fun App() {


...


Header()


Footer()

}

}
//
perf tip #3: derivedStateOf
state read!

View Slide

@Composable

fun App() {


...

val showScrollToTop by remember {

derivedStateOf { scrollOffset > 0f }

)


Header()

Content(showScrollToTop = showScrollToTop)

Footer()

}

}
//
out of composition
in composition

View Slide

@Composable

fun App() {


...

val derivedScrollOffset by remember {

derivedStateOf { scrollOffset - 10f }

)


Header()

Content(showScrollToTop = derivedScrollOffset > 0f)

Footer()

}

}
//
❌
out of composition
in composition

View Slide

@Composable

fun App() {

...


derivedStateOf { scrollOffset > 0f }

)

val buttonHeight by remember {

derivedStateOf { showScrollToTop ? 0f : 100f }

}

}
//

View Slide

@Composable

fun App() {

...


derivedStateOf(structuralEqualityPolicy()) { scrollOffset > 0f }

)

val buttonHeight by remember {

derivedStateOf { showScrollToTop ? 0f : 100f }

}

}
//

View Slide

//
perf tip #4: reduce scope of state update

View Slide

@Composable fun App() {

...


Header()

Content(showScrollToTop = { scrollOffset > 0f } )

Footer()

}

val textOffset by animateValueAsState(scrollOffset)

Text(Modifier.offset(textOffset))

}
//
Recompose scope

View Slide

@Composable fun App() {

...


Header()

Content(showScrollToTop = { scrollOffset > 0f } )

Footer()

}

TextWithOffset(offset = scrollOffset)

}

@Composable fun TextWithOffset(offset: Int) {

val textOffset by animateValueAsState(offset)

Text(Modifier.offset(textOffset))

}
//
Recompose scope

View Slide



Button(onClick = { counter
++
}) {

Text("$counter")

}

}
Recompose scope

View Slide

Should you optimize all state
reads?
No.

View Slide

@Composable

fun PostColumn(posts: List) {

Column {

posts.forEach { model
->

Post(model)

}

}

}

View Slide

Frame #1 Frame #2 Frame #3

View Slide

Frame #1 Frame #4
Frame #2 Frame #3
PostColumn
All Post composables get recomposed
AppScreen

View Slide

Understanding Stability

View Slide

//
What makes a type stable?

//
1. Immutability

//
2. Observable mutability (e.g. MutableState)

View Slide

...
) {


val parametersChanged =
/*
change handling logic
*/

if (parametersChanged) {

//
function body

}


}

View Slide

//
stability tip #1: immutable types or observable mutability

View Slide

Compose Compiler metrics
//
-classes.txt

unstable class Model {

stable val postType: String

unstable var isSynchronized: Boolean

= Unstable

}

//
-composables.txt

restartable fun Post(

unstable model: Model

)

View Slide

//
-classes.txt

unstable class Model {


unstable var isSynchronized: Boolean

= Unstable

}

//
-composables.txt

restartable fun Post(

unstable model: Model

)
class Model {

val postType: String

var isSynchronized: Boolean

}

@Composable fun Post(

model: Model

)

View Slide

//
-classes.txt

stable class Model {


stable val isSynchronized: Boolean

= Stable

}

//
-composables.txt

restartable skippable fun Post(

stable model: Model

)
data class Model {

val postType: String

val isSynchronized: Boolean

}

@Composable fun Post(

model: Model

)

View Slide

Only updated Post is executed
AppScreen
PostColumn
Frame #4

View Slide

@Immutable / @Stable


View Slide

@Immutable / @Stable

interface WindowInsetsController
Children will be considered stable

View Slide

//
stability tip #2: not everything has to be stable

View Slide

//
-composables.txt

restartable fun PostColumn(

unstable models: List

)
@Composable fun PostColumn(

models: List

)

View Slide

//
-composables.txt

restartable skippable fun PostColumn(

stable contents: kotlinx.collections.immutable.ImmutableList

)

View Slide

Post
AppScreen
PostColumn
Frame #4
Post still has to be updated

View Slide

//
stability tip #3: lambdas

View Slide

Understanding

Lambda Stability

View Slide

//
the haiku about

//
implementation details

//
fleeting in moment

View Slide

Lambdas are always
stable

View Slide

fun openPost(model: Model) {
...
}

@Composable


Column {

->

Post(model) {

//
onClick

openPost(model)

}

}

}

}

View Slide

Post(model) {
//
onClick

openPost(model)

}

//
is compiled into:

//
file level

class Post$1(private val model: Model) : Function0 {

override fun invoke() {

openPost(model)

}

}

//
inside composable

Post(model, Post$1(model))

View Slide

Post(model) {
//
onClick

openPost(model)

}

//
is compiled into:

//
file level

class Post$1(private val model: Model) : Function0 {


openPost(model)

}

}

//
inside composable

Post(model, Post$1(model))
no .equals() implementation
restart creates new instance

View Slide

Post(model) {
//
onClick

println("Clicked!")

}

//
is compiled into:

//
file level

val lambdaParam = object : Function0 {


println("Clicked!")

}

}

//
inside composable

Post(model, lambdaParam)

View Slide

Post(model) {
//
onClick

println("Clicked!")

}

//
is compiled into:

//
file level

val lambdaParam = object : Function0 {


println("Clicked!")

}

}

//
inside composable

Post(model, lambdaParam)
no captures!

View Slide

Post(model) {
//
onClick

println(model)

}

//
is compiled into:

//
file level

class Post$1(val model: Model) : Function0 {


println(model)

}

}

//
inside composable

val onClick = remember(model) { Post$1(model) }

Post(model, onClick)

View Slide

Post(model) {
//
onClick

println(model)

}

//
is compiled into:

//
file level

class Post$1(val model: Model) : Function0 {


println(model)

}

}

//
inside composable

val onClick = remember(model) { Post$1(model) }

Post(model, onClick)
stable capture!

View Slide

class PostActivity : Activity {

fun openPost(model: Model) {
...
}

@Composable


Column {

->

Post(model) {

//
onClick

openPost(model)

}

}

}

}

}

View Slide

Post(model) {
//
onClick

openPost(model)

}

//
is compiled into:

//
file level

class PostActivity$Post$1($this: PostActivity, model: Model) : Function0 {


$this.openPost(model)

}

}

//
composable

Post(model, PostActivity$Post$1(this, model))
stable!
unstable!

View Slide

Compiler isn't always
smart, but it is
consistent

View Slide

//
stability tip #3: lambdas - remember with care

View Slide

That quote about
premature
optimization
— Certainly somebody smart

View Slide

Improve Monitor
Inspect

View Slide

Defer reading state to a later
phase (layout, drawing)

Control how often state
updates causes
recomposition with derived
state
Check hot code paths for
unstable types

Measure if additional stability
brings perf benefits
State Reads Stability
Compiler tries its best.

 
 
remember with care.
Lambdas

View Slide

xkcd.com/1691/
Andrei Shikov (he/him)

Compose @Google

@shikasd_
Jossi Wolf (he/him)

Compose @Google

@jossiwolf

View Slide

Understanding Recomposition Performance Pitfalls

Understanding Recomposition Performance Pitfalls

Jossi Wolf

More Decks by Jossi Wolf

Other Decks in Programming

Featured

Transcript