Is there any setting or similar in compose to show...

# compose

[nlindberg]

Is there any setting or similar in compose to show rerenders visually like they have in flutter? https://flutter.dev/docs/development/tools/devtools/inspector#highlight-repaints

[Stylianos Gakis]

No but you can probably try making your own?
This is a primitive version I just built

private operator fun Color.inc(): Color {
    // Or by a nicer amount. Maybe consider making it follow the rainbow colors? Not sure what the sequence Flutter colors follow for this.
    fun Float.increaseColorByLittle(): Float =
        (this + 0.02f).coerceAtMost(1f)

    // Or actually make this look nicer
    return when {
        red != 1f -> this.copy(red = red.increaseColorByLittle())
        green != 1f -> this.copy(green = green.increaseColorByLittle())
        blue != 1f -> this.copy(blue = blue.increaseColorByLittle())
        else -> Color(red = 0f, green = 0f, blue = 0f)
    }
}

fun Modifier.indicateRecompositions(width: Dp = 20.dp): Modifier = composed {
    var color by remember { mutableStateOf(Color(red = 255, green = 0, blue = 0, alpha = 128)) }

    SideEffect {
        color++
    }

    this.then(
        Modifier
            .drawWithContent {
                drawContent()
                val topLeftOffset = Offset(width.toPx() / 2, width.toPx() / 2)
                drawRect(
                    color = color,
                    style = Stroke(width = width.toPx()),
                    topLeft = topLeftOffset,
                    // Size adjustments to make it be *inside* the composable instead of stroking along the edges
                    size = Size(
                        width = size.width - (topLeftOffset.x * 2),
                        height = size.height - (topLeftOffset.y * 2),
                    )
                )
            }
    )
}

And then just add it to any of your composables like

modifier = Modifier.indicateRecompositions()

And it should change the color slightly whenever a recomposition happens. Feel free to adjust all the values to get a better feeling of it.

[Stylianos Gakis]

Hey and if you DO make a nicer one, I’d love to see it if you don’t mind 😅 I made this just for you, but I now that I have it, I think I’ll be using it somewhat often, it’s pretty useful.

[nlindberg]

Yee i like the modifier solution. And the feature itself i think is super useful to get some verification that state handling and structure is effecient

[Stylianos Gakis]

This is like 7 months old but I stumbled upon this and I thought you might be interested in this
https://github.com/android/snippets/blob/master/compose/recomposehighlighter/src/m[…]le/android/compose/recomposehighlighter/RecomposeHighlighter.kt
from here
https://android-developers.googleblog.com/2022/03/play-time-with-jetpack-compose.html
😄