the state is not a SnapshotState , why whenever it...

# compose

[Peng Wang]

the state is not a SnapshotState , why whenever it changed the canvas can redraw?

val state = mutableListOf(0f)

@Preview
@Composable
fun test() {
    Box {
        Button(onClick = {
            state[0] += 100f
        }) {
            Text(" > ")
        }

        Canvas(Modifier.fillMaxSize()) {

            drawCircle(color = Color.Red, center = Offset(state[0], 500f), radius = 200f)
        }
    }
}

[Alexandre Elias [G]]

It's likely because the Button is redrawing to have a ripple effect, and it winds up in the same recomposition group as your Canvas.

[Zach Klippenstein (he/him) [MOD]]

For drawing it would not be due to recomposition scope, but graphics layers, if the button’s ripple is drawing on the same graphics layer as your canvas. Whenever something draws, it draws to the current layer. Most components do not create their own layers, so by default in a situation like this everything draws to the same layer. And when a layer is redrawn, everything on that layer gets redrawn, we don't redraw partial layers. So if the button’s ripple is invalidating the same layer as your canvas, your canvas will redraw on every frame during the ripple animation.

You can introduce a layer with the graphicsLayer modifier to see the difference. But layers have a significant cost, both in terms of memory and other things, so do not just start adding them everywhere. Drawing simple things like this circle is probably not worth it.