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) {
  // ...
}