When will Jetpack Compose launch recomposition and what will be recomposition?

Question

I was told "You need to create scopes if you need to have scoped recompositions" by Thracian in the question.

It seems that I can't find the policy from official documnet.

The Code A is based the answer of Thracian. I get Result A when I run Code A.

1: When will MyColumn(Calendar.getInstance().time.toSeconds()) be launched ?

2: Why is CallMyColumn() launched only one time?

Code A

class SoundViewModel(): ViewModel() {
    var i = 0
    val a1: Flow<Int> = flow {
        while (true) {
            emit(i++)
            delay(500)
        }
    }

    val a2: Flow<Int> = flow {
        while (true) {
            emit(i)
            delay(2000)
        }
    }
}

@Composable
fun ScreenDetail(   
    mViewMode: SoundViewModel   
) {
    Column() {
        val b1=mViewMode.a1.collectAsState(initial = 0)
        val b2=mViewMode.a2.collectAsState(initial = 0)

        MyColumn("A: "+ b1.value.toString())
        MyColumn("B: "+ b2.value.toString())
        MyColumn("C: "+ "Hello")                          //It's only fired one time
        Log.e("My","D: World")
        MyColumn(Calendar.getInstance().time.toSeconds()) //I don't know when it is fired
        CallMyColumn()                                    //It's only fired one time
    }
}

@Composable
private fun MyColumn(counter:String){
    Column(modifier= Modifier.background(color =getRandomColor()).fillMaxWidth()) {
        Text(counter)
        Log.e("My",counter)
    }
}

@Composable
private fun CallMyColumn() {
     MyColumn("Call "+ Calendar.getInstance().time.toSeconds())
//    Column(modifier = Modifier.background(color = getRandomColor()).fillMaxWidth()) {
//        val s = "Call " + Calendar.getInstance().time.toSeconds()
//        Text(s)
//        Log.e("My", s)
//    }
}

fun getRandomColor() =  Color(
    red = Random.nextInt(256),
    green = Random.nextInt(256),
    blue = Random.nextInt(256),
    alpha = 255
)

fun Date.toSeconds():String{
    return SimpleDateFormat("yyyy/MM/dd HH:mm:ss", Locale.US).format(this)
}

Result A

2022-06-21 12:02:34.761 19237-19237/info.dodata.soundmeter E/My: A: 0
2022-06-21 12:02:34.761 19237-19237/info.dodata.soundmeter E/My: B: 0
2022-06-21 12:02:34.762 19237-19237/info.dodata.soundmeter E/My: C: Hello
2022-06-21 12:02:34.762 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:34.764 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:34
2022-06-21 12:02:34.765 19237-19237/info.dodata.soundmeter E/My: Call 2022/06/21 04:02:34
2022-06-21 12:02:34.849 19237-19237/info.dodata.soundmeter E/My: B: 1
2022-06-21 12:02:34.849 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:35.230 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:35.231 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:35
2022-06-21 12:02:35.365 19237-19237/info.dodata.soundmeter E/My: A: 1
2022-06-21 12:02:35.366 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:35.869 19237-19237/info.dodata.soundmeter E/My: A: 2
2022-06-21 12:02:35.870 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:36.365 19237-19237/info.dodata.soundmeter E/My: A: 3
2022-06-21 12:02:36.365 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:36.367 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:36
2022-06-21 12:02:36.871 19237-19237/info.dodata.soundmeter E/My: A: 4
2022-06-21 12:02:36.873 19237-19237/info.dodata.soundmeter E/My: B: 4
2022-06-21 12:02:36.873 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:37.368 19237-19237/info.dodata.soundmeter E/My: A: 5
2022-06-21 12:02:37.368 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:37.369 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:37
2022-06-21 12:02:37.872 19237-19237/info.dodata.soundmeter E/My: A: 6
2022-06-21 12:02:37.873 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:38.371 19237-19237/info.dodata.soundmeter E/My: A: 7
2022-06-21 12:02:38.371 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:38.373 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:38
2022-06-21 12:02:38.873 19237-19237/info.dodata.soundmeter E/My: A: 8
2022-06-21 12:02:38.873 19237-19237/info.dodata.soundmeter E/My: B: 8
2022-06-21 12:02:38.873 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:39.375 19237-19237/info.dodata.soundmeter E/My: A: 9
2022-06-21 12:02:39.375 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:39.377 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:39
2022-06-21 12:02:39.875 19237-19237/info.dodata.soundmeter E/My: A: 10
2022-06-21 12:02:39.875 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:40.375 19237-19237/info.dodata.soundmeter E/My: A: 11
2022-06-21 12:02:40.375 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:40.377 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:40
2022-06-21 12:02:40.861 19237-19237/info.dodata.soundmeter E/My: B: 12
2022-06-21 12:02:40.861 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:40.882 19237-19237/info.dodata.soundmeter E/My: A: 12
2022-06-21 12:02:40.882 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:41.401 19237-19237/info.dodata.soundmeter E/My: A: 13
2022-06-21 12:02:41.402 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:41.405 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:41
2022-06-21 12:02:41.898 19237-19237/info.dodata.soundmeter E/My: A: 14
2022-06-21 12:02:41.898 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:42.404 19237-19237/info.dodata.soundmeter E/My: A: 15
2022-06-21 12:02:42.404 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:42.408 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:42
2022-06-21 12:02:42.869 19237-19237/info.dodata.soundmeter E/My: B: 16
2022-06-21 12:02:42.869 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:42.895 19237-19237/info.dodata.soundmeter E/My: A: 16
2022-06-21 12:02:42.895 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:43.401 19237-19237/info.dodata.soundmeter E/My: A: 17
2022-06-21 12:02:43.401 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:43.402 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:43
2022-06-21 12:02:43.908 19237-19237/info.dodata.soundmeter E/My: A: 18
2022-06-21 12:02:43.908 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:44.426 19237-19237/info.dodata.soundmeter E/My: A: 19
2022-06-21 12:02:44.426 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:44.431 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:44
2022-06-21 12:02:44.873 19237-19237/info.dodata.soundmeter E/My: B: 20
2022-06-21 12:02:44.874 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:44.925 19237-19237/info.dodata.soundmeter E/My: A: 20
2022-06-21 12:02:44.925 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:45.426 19237-19237/info.dodata.soundmeter E/My: A: 21
2022-06-21 12:02:45.427 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:45.428 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:45
2022-06-21 12:02:45.927 19237-19237/info.dodata.soundmeter E/My: A: 22
2022-06-21 12:02:45.927 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:46.429 19237-19237/info.dodata.soundmeter E/My: A: 23
2022-06-21 12:02:46.429 19237-19237/info.dodata.soundmeter E/My: D: World
2022-06-21 12:02:46.430 19237-19237/info.dodata.soundmeter E/My: 2022/06/21 04:02:46
2022-06-21 12:02:46.878 19237-19237/info.dodata.soundmeter E/My: B: 24
2022-06-21 12:02:46.878 19237-19237/info.dodata.soundmeter E/My: D: World

Added Content:

To Thracian: Thanks!

I run Code B and get Result B.

I don't know why Log.e("My","Canvas "+ Calendar.getInstance().time.toSeconds()) can be launched repeated, could you tell me ?

Code B

//The other codes are same as Code A.

@Composable
private fun CallMyColumn() {
    MyColumn("Call "+ Calendar.getInstance().time.toSeconds())

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
    ) {
        Log.e("My","Canvas "+ Calendar.getInstance().time.toSeconds())
    }
}

Result B

2022-06-21 17:38:53.026 11931-11931/info.dodata.soundmeter E/My: A: 0
2022-06-21 17:38:53.027 11931-11931/info.dodata.soundmeter E/My: B: 0
2022-06-21 17:38:53.028 11931-11931/info.dodata.soundmeter E/My: C: Hello
2022-06-21 17:38:53.028 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:53.030 11931-11931/info.dodata.soundmeter E/My: 2022/06/21 09:38:53
2022-06-21 17:38:53.032 11931-11931/info.dodata.soundmeter E/My: Call 2022/06/21 09:38:53
2022-06-21 17:38:53.594 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:53
2022-06-21 17:38:54.171 11931-11931/info.dodata.soundmeter E/My: B: 1
2022-06-21 17:38:54.171 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:54.181 11931-11931/info.dodata.soundmeter E/My: 2022/06/21 09:38:54
2022-06-21 17:38:54.239 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:54
2022-06-21 17:38:54.585 11931-11931/info.dodata.soundmeter E/My: A: 1
2022-06-21 17:38:54.585 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:54.593 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:54
2022-06-21 17:38:55.175 11931-11931/info.dodata.soundmeter E/My: A: 2
2022-06-21 17:38:55.175 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:55.176 11931-11931/info.dodata.soundmeter E/My: 2022/06/21 09:38:55
2022-06-21 17:38:55.184 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:55
2022-06-21 17:38:55.423 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:55
2022-06-21 17:38:55.683 11931-11931/info.dodata.soundmeter E/My: A: 3
2022-06-21 17:38:55.684 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:55.711 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:55
2022-06-21 17:38:56.100 11931-11931/info.dodata.soundmeter E/My: B: 4
2022-06-21 17:38:56.100 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:56.104 11931-11931/info.dodata.soundmeter E/My: 2022/06/21 09:38:56
2022-06-21 17:38:56.122 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:56
2022-06-21 17:38:56.183 11931-11931/info.dodata.soundmeter E/My: A: 4
2022-06-21 17:38:56.183 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:56.190 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:56
2022-06-21 17:38:56.692 11931-11931/info.dodata.soundmeter E/My: A: 5
2022-06-21 17:38:56.692 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:56.712 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:56
2022-06-21 17:38:57.195 11931-11931/info.dodata.soundmeter E/My: A: 6
2022-06-21 17:38:57.195 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:57.197 11931-11931/info.dodata.soundmeter E/My: 2022/06/21 09:38:57
2022-06-21 17:38:57.207 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:57
2022-06-21 17:38:57.695 11931-11931/info.dodata.soundmeter E/My: A: 7
2022-06-21 17:38:57.695 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:57.704 11931-11931/info.dodata.soundmeter E/My: Canvas 2022/06/21 09:38:57
2022-06-21 17:38:58.118 11931-11931/info.dodata.soundmeter E/My: B: 8
2022-06-21 17:38:58.119 11931-11931/info.dodata.soundmeter E/My: D: World
2022-06-21 17:38:58.122 11931-11931/info.dodata.soundmeter E/My: 2022/06/21 09:38:58

Thracian · Answer 1 · 2022-06-21T07:43:47.507

0

When a State is read it triggers recomposition in nearest scope. And a scope is a function that is not marked with inline and returns Unit. Column, Row and Box are inline functions and because of that they don't create scopes.

Sources

https://dev.to/zachklipp/scoped-recomposition-jetpack-compose-what-happens-when-state-changes-l78

https://www.jetpackcompose.app/articles/donut-hole-skipping-in-jetpack-compose

https://twitter.com/intelligibabble/status/1435676765725224964?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1435676765725224964%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.jetpackcompose.app%2Farticles%2Fdonut-hole-skipping-in-jetpack-compose

Jetpack Compose Smart Recomposition

Why does mutableStateOf without remember work sometimes?

Same goes for Modifiers too. When they read states without lambda they are recomposed too.

For instance Modifier.offset() is recomposed when the state it reads changes however Modifier.offset{} calls Layout and Draw phases. When you chain Modifiers they create a CombinedModifier and any Modifier chained that reads a State in Composition phase causes that subsection of CombinedModifier to change and recomposition happens in your Composable with the updated Modifier.

https://developer.android.com/jetpack/compose/performance

Also i have tutorial that covers recomposition, smart recomposition, modifier recomposition and phases. You can check it out and play with it too, and see effects. State section covers these topics.

https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials

edited Jun 21 '22 at 07:43

answered Jun 21 '22 at 06:52

Thracian

43,021
16
133
222

Thanks! `CallMyColumn() ` should be recomposed, and in fact it's fired only one time. – HelloCW Jun 21 '22 at 07:07
You should definitely read the articles and sources i shared. I read them several times even after i posted answer for smart recomposition. I still read and notice things that i missed. I think this is one of the most complex part of the compose and you might need time to digest the resources and information. – Thracian Jun 21 '22 at 07:13
Thanks! In this answer you told me `Column, Row and Box are inline functions and because of that they don't create scopes.`, but in previous answer, you told me `you will be having scopes for each value you read` for Column. You can see it at https://www.dropbox.com/s/nxvuqzt8b5ztgc2/answer.png?dl=0 and previous answer https://stackoverflow.com/questions/72673880/how-can-i-launch-recomposition-when-a-specified-flow-changed-in-jetpack-compose – HelloCW Jun 21 '22 at 07:16
Your `CallMyColumn() ` is a separate function so it's not recomposed when anything changes in its parent. It needs to read something to be recomposed. If it was a Column{} instead of ` CallMyColumn() ` it would have been recomposed because it's callsite or scope is same as parent. Anything with scope needs to read some value and that value needs to be different from previous recomposition to be recomposed. – Thracian Jun 21 '22 at 07:18
Thanks! Yes,`Column() { MyColumn("New "+Calendar.getInstance().time.toSeconds()) }` is recomposed. – HelloCW Jun 21 '22 at 07:36
Thanks! Would you please to see my added content in the question? – HelloCW Jun 21 '22 at 09:46
And more, `nearest scope` means to Search a function from inside to outside based `State` varaiable location until meet a function which is not marked with `inline` and returns `Unit`, right? – HelloCW Jun 21 '22 at 09:52
Yes, nearest scope more or less what you or described in [this article](https://dev.to/zachklipp/scoped-recomposition-jetpack-compose-what-happens-when-state-changes-l78). – Thracian Jun 21 '22 at 10:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245784/discussion-between-thracian-and-hellocw). – Thracian Jun 21 '22 at 10:13

When will Jetpack Compose launch recomposition and what will be recomposition?

1 Answers1

Linked