Hi, I am facing an unexpected behavior regarding t...

# compose

[Mbt925]

Hi,
I am facing an unexpected behavior regarding the recomposition count with the following composable:

@Composable
 fun Test() {
     var isShown by remember { mutableStateOf(false) }
     val opacity by animateFloatAsState(targetValue = if (isShown) 0f else 0.5f, label = "")
 
     Column(Modifier.statusBarsPadding()) {
         Button(
             onClick = { isShown = !isShown }) { Text(text = "Toggle text") }
         
         Text(text = "Hello world", modifier = Modifier.graphicsLayer { alpha = opacity })
     }
 }

The above composable works fine. The recomposition of Hello world text is skipped as expected. However, if I replace graphicsLayer { alpha = opacity } with Modifier.animateAlpha { opacity } using the following function, it recomposes every time the button is clicked:

@Stable
 fun Modifier.animateAlpha(alpha: () -> Float) = this.graphicsLayer {
     this.alpha = alpha()
 }

Any insight into the issue is appreciated.

[Albert Chang]

The above composable works fine. It doesn't recompose Hello world text every time, but only once.

I doubt if that's true. I would expect the function to be recomposed every time the button is clicked because without a recomposition, the targetValue of animateFloatAsState can't be updated.

[Mbt925]

@Albert Chang you're right. I meant the composition and layout phases are not re-executed. Edited the question.

[Albert Chang]

That doesn't change anything. As I said,

without a recomposition, the targetValue of animateFloatAsState can't be updated.

And by recomposition I mean all the phases including composition phase.

[Mbt925]

The hello world composable doesn't need recomposition, but only the Test composable

[Albert Chang]

The hello world text will be recomposed in both cases. Read the Caveat: Inline composable functions section in this post for the reason.

[Mbt925]

The article is talking about a different topic. Please run the code and check the recomposition count.

[Albert Chang]

I see what you mean. So instead of "the text is not recomposed" it's better to say "the recomposition of the text is skipped" so that others can more easily understand.

[Albert Chang]

This is because the memoization of lambdas in compose. In the first case, the lambda { alpha = opacity } is memoized (i.e. it will always be the same instance across compositions) and so the modifier will be considered the same, in which case the Text call can be skipped. But in the second case, while { opacity } is memoized, the lambda in the Modifier.animateAlpha function isn't, as memoization only happens in composable functions. Therefore the lambda passed to Modifier.graphicsLayer won't be the same instance, and so the modifier won't be considered the same.

[Mbt925]

Thanks for the insight. How can I achieve the same result then?

[Albert Chang]

Just use the first form, or use something like this:

val lambda = { opacity }
val modifier = remember(lambda) {
    Modifier.animateAlpha(lambda)
}

Btw, avoid premature optimization.

[Mbt925]

This is just a simplified version of the use case. Why is there a Modifier.alpha extension, if it doesn't do what it's supposed to do (only affecting the drawing phase)? How are we supposed to delegate complex logic to extension functions on Modifiers then?

[Albert Chang]

Create your own Modifier.Node. That's always the best approach.

[Francesc]

Why is there a Modifier.alpha extension, if it doesn't do what it's supposed to do

Modifier.alpha is simpler to use than graphicsLayer { alpha = x } if you have a static alpha, not an animating one