5

I don't know why in my code the text where I type "hi" is always recomposed. The text was fixed to "hi", and onClick also maintained the instance using uiEvent remember.

Even if uiState.isLoading is changed, it is not related to Text, so I expected that recomposition would be skipped, but recomposition always occurs when Text is changed.

Here is my code:

UiState Data Class

data class UiState(
    val isLoading: Boolean
)

UiEvent Interface.

@Immutable
interface UiEvent {
    fun onClick()
}

Composable

@Composable
fun MyScreen(
    viewModel: MyViewModel = hiltViewModels()
) {
    val uiState = viewModel.uiState.collectAsStateWithLifecycle()
    val uiEvent = remember {
       object: UiEvent {
            override onClick() {
                viewModel.action()
            }
       }
    }
    Text(  // why recomposition?
        modifier = Modifier.clickable(onClick = uiEvent::onClick),
        text = "hi"
    )
    if (uiState.isLoading) {
        Text(text = "isLoading")
    }

}
1

2 Answers 2

7

I assume what you are asking is why does Text not skip whenever MyScreen recomposes. The reason is a new of the clickable modifier is being created every time. Consider remembering the entire modifier such as:

@Composable
fun MyScreen(
    viewModel: MyViewModel = hiltViewModels()
) {
    val uiState = viewModel.uiState.collectAsStateWithLifecycle()
    val modifier = remember(viewModel) {
        val event = object: UiEvent {
            override fun onClick() {
                viewModel.action()
            }
        }
        Modifier.clickable { event.onClick() }
    }
    Text(  // why recomposition?
        modifier = modifier,
        text = "hi"
    )
    if (uiState.isLoading) {
        Text(text = "isLoading")
    }
}

Note the addition of the viewModel as a parameter to the remember to ensure a new version of clickable() gets created if/when the viewModel changes.

The compose compiler plugin should recognize the :: syntax and do the remember for you, like it does for lambda syntax, but it doesn't right now. Also, the clickable() always returns a modifier that is not equal to the previous version for the same parameters, but that is going to be fixed in 1.5 (along with quite a number of other performance related fixes for clickable()). For now, you can work around these limitation by remembering the entire modifier.

3
  • 2
    Wow. I spend a couple of hours to find out that the clickable modifier is returning a new instance and therfore not fulfill the contract of @Stable. Thanks for the answer anyways. That helped a lot!
    – StefMa
    May 16 at 19:39
  • Not yet fixed in the 1.5.0 release Aug 21 at 8:49
  • Which part? The part I said would be fixed in 1.5 is.
    – chuckj
    Aug 22 at 20:08
1

I have made a simple layout with 3 texts:

  • Static text with on click
  • Static text
  • Dynamic text (with clicks count)

simple layout

This is how recompositions count looks after 3 clicks:

recompositions

Clickable Text is recomposed every click. Tested on Compose BOM 2023.08.00

Workaround is to wrap clickable modifier with remember but I am not sure if it should be default way to use clickable Modifier.

1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Aug 25 at 23:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.