JetpackCompose.app Home

Log Compose Compositions

The easiest way to debug recompositions is to use good ol' log statements to see which composables functions are being called and the frequency with which they are being called. This is really obvious but there's some nuance to it - we want to trigger these log statements only when recompositions are happening. This sounds like the perfect use case for SideEffect, a composable function that is reinvoked on every successful composition (& recomposition).

Here's this helper function in action -

@Composable
fun MyComponent() {
    val counter by remember { mutableStateOf(0) }

    LogCompositions(TAG, "MyComposable function")

    CustomText(
        text = "Counter: $counter",
        modifier = Modifier
            .clickable {
                counter++
            },
    )
}

@Composable
fun CustomText(
    text: String,
    modifier: Modifier = Modifier,
) {
    LogCompositions(TAG, "CustomText function")

    Text(
        text = text,
        modifier = modifier.padding(32.dp),
        style = TextStyle(
            fontSize = 20.sp,
            textDecoration = TextDecoration.Underline,
            fontFamily = FontFamily.Monospace
        )
    )
}

On running this example, we notice that both MyComponent & CustomText are recomposed every time the value of the counter changes.

Example: Print log statements

Have a project you'd like to submit? Fill this form, will ya!

JetpackCompose.app Job Board

Find the best Android jobs in world-class companies. Here are some featured jobs from the job board