Passing State value, or State, as Composable function parameter

Question

In a Composable function, I can pass as parameter the State, or the value of the State. Any reason for preferring to pass the value of the State, instead of the State?

In both cases, the composable is stateless, so why should I distinguish both cases?

Answer 1

There is a slight difference between passing State or just the value of a State regarding recomposition.

Let's start with passing State:

@Composable
fun Example1(text: State<String>) {
  SideEffect { Log.d("Example", "Example1 recomposition") }
  Example2(text)
}

@Composable
fun Example2(text: State<String>) {
  SideEffect { Log.d("Example", "Example2 recomposition") }
  Text(text.value)
}

@Composable
fun Screen() {
  val text = remember { mutableStateOf("hello") } }

  Example1(text)

  Button(
    onClick = { text.value = "world" }
  ) {
    Text("Click me")
  }
}

On first start you will see the log output

Example1 recomposition
Example2 recomposition

However when you click the button, you will only see an additional

Example2 recomposition

Because you're passing down State and only Example2 is reading the state, Example1 does not need to be recomposed.

Let's change the parameters to a plain type:

@Composable
fun Example1(text: String) {
  SideEffect { Log.d("Example", "Example1 recomposition") }
  Example2(text)
}

@Composable
fun Example2(text: String) {
  SideEffect { Log.d("Example", "Example2 recomposition") }
  Text(text)
}

@Composable
fun Screen() {
  val text = remember { mutableStateOf("hello") } }

  Example1(text.value)

  Button(
    onClick = { text.value = "world" }
  ) {
    Text("Click me")
  }
}

When you click the button now, you will see two additional lines in the log output

Example1 recomposition
Example2 recomposition

Since text is now a plain type of the function signatures of both composables, both need to be recomposed when the value changes.

However always passing down State can become quite cumbersome. Compose is quite good at detecting what needs to be recomposed so this should be considered a micro optimization. I just wanted to point out that there is a slight difference which every developer using Compose should know about.

Answer 2

Short: Pass the State object

Although sven Jacobs answer is totally correct, I just want to add more explanation. Here's a summary of the difference:

• Passing a State object: Only the composable functions that read the state value will be recomposed when the state changes. Composable functions that don't read the state value won't be recomposed.
• Passing the value of a State: Any change to the value will trigger recomposition of the composable function, regardless of whether it directly reads the value or not.