Need some tip for dealing with Compose recomposition

[b95505017]

Component is a pure interface. Which makes Compose think it is unstable when put it as parameter.

Another issue is calling component function from lambda (e.g. onClick = { component.handleId(id) }. I found that I need do some extra remember wrapper, or it can't skip recomposition when state changed.

[arkivanov]

Thanks for the question. This is more a general Compose question because it also applies to Compose with classic ViewModels.

In general, it's advised to avoid premature optimisations unless you have real and measurable issues with performance. Compose is smart enough to skip unnecessary compositions. Also recomposition doesn't imply redrawing.

Consider the following code.

@Composable
fun SomeContent(component: SomeComponent) {
    val state by component.state.subscribeAsState()
    Column {
        Text(text = state.text1)
        Text(text = state.text2)
    }
}

Even though SomeContent will recompose on every state change, each Text will be recomposed and re-rendered only if the corresponding text property has changed. So, optimising SomeContent would not make any big difference.

But if you really want to optimise at max, then consider the following.

@Composable
fun SomeContent(component: SomeComponent) {
    val state by component.state.subscribeAsState()
    SomeView(text = state)
}

@Composable
private fun SomeView(state: SomeComponent.State) {
  // ...
}

[arkivanov]

Converted to discussion.

[b95505017]

Thanks! I'm struggling with calling component function in lambda as parameter. (e.g. Button(onClick = { component.handle(something) } { Text("click me") })

I found that as UI state change (not click through this Button), the lambda can't skip recomposition unless I wrapped with onClick = remember { { component.handle(something) } }.

[arkivanov]

Yes, that's true. But this usually shouldn't cause any performance issues. I believe using remember for click listeners adds additional cognitive load. So I would apply only if there are measurable performance issues. E.g. if the state changes very often (like 60fps), I would use a profiler and apply remember in this case.

[arkivanov]

Also, passing ViewModel (or in other words state holders) is the recommended approach.

[arkivanov]

Additionally, as it was mentioned in the Kotlinlang Slack, an experimental "strong skipping mode" was added in Compose Compiler v1.5.4.

Strong skipping mode allows composables with unstable parameters to be skipped.

It should help with unnecessary recompositions.