Pass by Value vs CompositionLocal vs Static CompositionLocal

Examples to show how to pass data to composable functions using function parameters(i.e. pass by value), CompositionLocal and static CompositionLocal

There are a few ways you can pass data to a composable function:

• Pass by Value (function parameter)
• CompositionLocal
• Static CompositionLocal

Pass by Value is a conventional way. CompositionLocal and static CompositionLocal is a Jetpack Compose way, but static CompositionLocal is useless in my opinion (will be explained later).

Pass by Value

This is a very simple example to pass counter value to the Parent() composable function, then increments it by 1 and passes it to the Child() composable function. Finally, it calls the GrandChild() composable function without any parameters.

Let’s investigate the code, what do you think the Logcat outputs are during the first composition and the subsequent recomposition?

private val tag = "CompLocal"

@Composable
fun PassByValueDemo() {

    var counter by remember {
        mutableStateOf(-1)
    }

    MyButton(onClick = { ++counter }, text = "PassByValue Demo")

    if(counter < 0) return

    Log.d(tag, "************** Pass by Value **************")
    Parent(counter)
}

@Composable
private fun Parent(value: Int) {
    Log.d(tag, "Start Parent - value: $value")
    Child(value + 1)
    Log.d(tag, "End Parent - value: $value")
}

@Composable
private fun Child(value: Int) {
    Log.d(tag, "Start Child - value: $value")
    GrandChild()
    Log.d(tag, "End Child - value: $value")
}


@Composable
private fun GrandChild() {
    Log.d(tag, "Start GrandChild")
    Log.d(tag, "End GrandChild")
}

Logcat Output — First Composition (first clicked)

value is incremented by 1 and passed into the Child() composable

************** Pass by Value **************
Start Parent - value: 0
Start Child - value: 1
Start GrandChild
End GrandChild
End Child - value: 1
End Parent - value: 0