What do you guys think about storing each chain of modifier within a remember block in compose. For...

# compose

[Mahmoo]

What do you guys think about storing each chain of modifier within a remember block in compose.

For example

val maxSize = remember { 
    Modifier.fillMaxSize()
        .clip(RoundedCornerShape(12))
        .background(Color.White)
        .clickable { 
            
        }
}

[Mahmoo]

will it have any significant performance impact?

[Mahmoo]

Lets say I have some animation state... and need to pass that state to to apply alpha modifier to it (dissappearing animation)

So I'll do something like

val alpha by animateFloatAsState(1f, tween(easing = LinearEasing), label = "")
val maxSize = remember {
    Modifier.fillMaxSize()
        .clip(RoundedCornerShape(12))
        .background(Color.White)
        .clickable {

        }
}

Box(modifier = maxSize.then(Modifier.alpha(alpha = alpha))) {
    CircularProgressIndicator(
        modifier = Modifier.align(Alignment.Center)
    )
}

So only the animation modifier recomposes rest all remains same

[Mahmoo]

question is does using this approach helps us in any way for optimisations?

[Zach Klippenstein (he/him) [MOD]]

It will reduce some allocations on recomposition, but shouldn’t have a huge performance impact in most cases. Modifiers are designed to be used with remembering their chains everywhere.

[Zach Klippenstein (he/him) [MOD]]

the best way to do what you’re trying to do with the alpha animation example is to use the graphicsLayer modifier that takes a function and then read your animation state in that lambda

[Mikolaj]

@Zach Klippenstein (he/him) [MOD] could You please elaborate on Modifiers are designed to be used with remembering their chains everywhere ? Is there info to be found in some docs on this topic?

[Mahmoo]

https://www.youtube.com/watch?v=BjGX2RftXsU▾

@Mikolaj I found this video... this should suffice your question

[Zach Klippenstein (he/him) [MOD]]

The modifier API was designed to be used without having to remember the chains everywhere. That’s how all the documentation shows them being used, all the samples, etc.