Compose - DropDownMenu is causing unwanted recomposition-CodePudding

This is the composable hierarchy in my app:

HorizontalPager
↪LazyVerticalGrid
 ↪PostItem
  ↪AsyncImage
   DropdownMenu
   ↪DropdownMenuItem

When swiping the HorizontalPager the AsyncImage inside my PostItem's are recomposing. Removing the DropdownMenu fixes this and the PostItem is no longe recomposing and gives the wanted behavior.

The problem is that I have huge FPS drops when swiping through the HorizontalPager. Why is DropdownMenu causing a recomposition when swiping the HorizontalPager?

var showMenu by remember { mutableStateOf(false) }
        DropdownMenu(
            expanded = showMenu,
            onDismissRequest = { showMenu = false }) {
            DropdownMenuItem(onClick = {

            }) {
                Text(text = "Share")
            }
    
}

CodePudding user response：

Unfortunately, without seeing more code showing the rest of the structure, it's hard to say for sure what your problem is here.

A likely answer is that you haven't split up your Composable function enough. Something the docs hardly talk about is that the content portion of a lot of the built-in Composeables are inline functions which means that if the content recomposes the parent will as well. This is the most simple example of this I can give.

@Composable
fun foo() {
    println("recompose function")

    Box {
        println("recompose box")

        Column {
            println("recompose column")

            Row {
                println("recompose row")

                var testState by mutableStateOf("my text")

                Button(
                    onClick = { testState = "new text" }
                ) {}
                Text(testState)
            }
        }
    }
}

output is: recompose function recompose box recompose column recompose row

Not only does this recompose the whole function it also recreates the testState causing it to never change values.

Again not 100% that this is your problem, but I would look into it. The solution would be to split my Row and row content into it's own Composable function.