Is it possible to understand what triggered recomposition ? I have 2 compositions in sequence and I'...

# compose-web

[salomonbrys]

Is it possible to understand what triggered recomposition ?
I have 2 compositions in sequence and I'd like to understand why.

[Oleksandr Karpovich [JB]]

Do you have code sample?
I don't know about any tool to see what triggers recomposition. Usual debugging is the only thing that comes to mind

[salomonbrys]

Nope. My code is fairly complex, and I'm pretty sure it's my fault. I just need to find where.

[salomonbrys]

@Oleksandr Karpovich [JB] It looks like the double compoise I get is due to using "CSS classes in components".

The following code generates a double composition:

object MyStyle : StyleSheet()
fun main() {
    renderComposableInBody {
        println("Composing!")
        Style(MyStyle)
        var bool by remember { mutableStateOf(false) }
        Div({
            classes(MyStyle.css {
                backgroundColor(if (bool) Color.red else Color.blue)
            })
        }) {
            Button({
                onClick { bool = !bool }
            }) { Text("Change color!") }
        }
    }
}

While the following code only composes once:

fun main() {
    renderComposableInBody {
        println("Composing!")
        var bool by remember { mutableStateOf(false) }
        Div({
            style {
                backgroundColor(if (bool) Color.red else Color.blue)
            }
        }) {
            Button({
                onClick { bool = !bool }
            }) { Text("Change color!") }
        }
    }
}

[salomonbrys]

@Oleksandr Karpovich [JB]
Here is a project demonstrating the jank: https://github.com/SalomonBrys/demo-InHeadComposeStyleSheet
And here is the corresponding issue I've opened: https://github.com/JetBrains/compose-jb/issues/1207