Android Compose 中的哑重组

Question

Consider this minimal code snippet (in Kotlin):

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import java.time.LocalDateTime
import java.util.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var time by remember {
                mutableStateOf("time")
            }
            Column(modifier = Modifier.clickable { time = LocalDateTime.now().toString() }) {
                Text(text = UUID.randomUUID().toString())
                Text(text = time)
            }
        }
    }
}

Examining the above code, from a logical perspective, one expects that upon clicking the Column , since only the parameter time changes, only the lower time Text composable would be redrawn. This is because recomposition skips as much as possible .

However, one finds that the upper Text composable is being redrawn too (the displayed UUID keeps changing).

1. Why is this?

Notice that the non-idempotence of my Column composable should have no bearing unless the redraw is dumb.

Answer 1

You can try running this block of code

@Composable
fun IdempotenceTest() {    
    var time by remember {
        mutableStateOf("time")
    }
    Column(
        modifier = Modifier.clickable {
            time = LocalDateTime.now().toString()
        }
    ) {
        Text(text = getRandomUuid())
        TestComposable(text = returnSameValue())
        Text(text = time)
    }
}

@Composable
fun TestComposable(text: String) {
    SideEffect {
        Log.d(TAG, "TestComposable composed with: $text")
    }
    Text(text = text)
}

private fun getRandomUuid(): String {
    Log.d(TAG, "getRandomUuid: called")
    return UUID.randomUUID().toString()
}

private fun returnSameValue(): String {
    Log.d(TAG, "returnSameValue: called")
    return "test"
}

If you check the logs, you will see that everytime the Column recomposes, the compiler will call the getRandomUuid and returnSameValue function and based on the value returned by these, it will decide whether or not to re-compose. If you want to prevent a calculation from happening again and again, wrap it in a remember{} block.

As a side-note, the Composable functions must be side-effect free to ensure idempotence. You can read more here

Answer 2

rememberSavable {...} worked for me.

It allows you to update the state, directly from clickable and trigger recomposition:

...
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
...

var time by rememberSaveable { mutableStateOf("time") }
Column(
    modifier = Modifier.clickable { 
        time = LocalDateTime.now().toString() 
    }
) {
    Text(text = UUID.randomUUID().toString())
    Text(text = time)
}