Jetpack Compose Large Recomposition Count in the Simple App

Question

I am new in Jetpack Compose and try to using the layout inspector to see recomposition count. I saw the large number when button is clicked.

I thought it just increment by small number on every recomposition. Here is the preview of inspector:

var number by remember {
    mutableStateOf(10)
}

Column(){
    Button(
        onClick = {number = Random.nextInt(0,99)}
    ){
        Text("number :$number")
    }
}

Is it expected or any explanation why the number is large on simple app. And what the threshold number to be considered our Compose app performance is poor in the context of recomposition?

Thank you!

I see you are using a Mac, would you happen to be using a trackpad? I can't explain it but very light & quick taps only recompose my Button once. A full click cause dozens of recompositions in a row. Maybe it has something to do with the click animation. Either way I'm not observing this with Material 3 compose library. — cincy_anddeveloper, Mar 10 '23 at 17:00
This is because the Button class has a Ripple by default which is a small animation and that is causing the recomposition, nothing to worry about — Ankit Wala, Mar 15 '23 at 13:52

score 1 · Answer 1 · answered Mar 15 '23 at 18:14

I think that the count in the Layout inspector is not accurate. In your code the recomposition occurs only for the Text inside the Button.

You can check it visually using this function:

fun randomColor() = Color(
    Random.nextInt(256),
    Random.nextInt(256),
    Random.nextInt(256),
    alpha = 255
)

Apply the same function to the background color of the Button and text color:

Button(
    onClick = {number = Random.nextInt(0,99)},
    colors = ButtonDefaults.buttonColors(backgroundColor = getRandomColor())
){
    Text("number :$number", color = getRandomColor())
}

You can check that every time you click the Button the Text is recomposed (it changes the text color) due to the number state that is updated. At the same time the Button is not recomposed.

You can also use a Log to check the same result in the Logcat using

class Ref(var value: Int)

// Note the inline function below which ensures that this function is essentially
// copied at the call site to ensure that its logging only recompositions from the
// original call site.
@Composable
inline fun LogCompositions(tag: String, msg: String) {
    if (BuildConfig.DEBUG) {
        val ref = remember { Ref(0) }
        SideEffect { ref.value++ }
        Log.d(tag, "Compositions: $msg ${ref.value}")
    }
}

and then in your code:

LogCompositions("Myapp", "Button")
Button(
    onClick = {number = Random.nextInt(0,99)},
    colors = ButtonDefaults.buttonColors(backgroundColor = getRandomColor()),
){
    LogCompositions("Myapp", "Text")
    Text("number :$number", color = getRandomColor())

}

In the log when the Button is clicked only the Text is recomposed:

D  Compositions: Text 1
D  Compositions: Text 2
D  Compositions: Text 3

For more info about the recomposition you can check this great answer by @Thracian and this post about the LogComposition.

Jetpack Compose Large Recomposition Count in the Simple App

1 Answers1