Search code examples
android-jetpack-composerecompose

How to prevent AndroidView from recomposition in jetpack


I have two AndroidView. And I need change place and state in one AndroidView but not recompose another. Then state change ChangableAndroidView NotChangableAndroidView recompose too.

How to prevent recompose NotChangableAndroidView then ChangableAndroidView change her state?

@Composable
fun TwoAndroidView(){
Column{
  if(isFirst){
    NotChangableAndroidView()
    ChangableAndroidView()
  }else{
    ChangableAndroidView
    NotChangableAndroidView
  }
}
}

Solution

  • There is a function called key and it could be used for your case:

    @Composable
    fun TwoAndroidViews(isFirst: Boolean) {
        Column {
            if (isFirst) {
                KeyedAndroidView(key = "notChangable", content = { NotChangableAndroidView() })
                KeyedAndroidView(key = "changable", content = { ChangableAndroidView() })
            } else {
                KeyedAndroidView(key = "changable", content = { ChangableAndroidView() })
                KeyedAndroidView(key = "notChangable", content = { NotChangableAndroidView() })
            }
        }
    }
    
    @Composable
    fun KeyedAndroidView(key: Any, content: @Composable () -> Unit) {
        key(key) {
            content()
        }
    }
    

    This approach uses the key composable function to help Compose track and optimize the recompositions of NotChangableAndroidView and ChangableAndroidView based on their keys. If the composables are identical in structure and only their data or state changes, Compose can optimize the recomposition process more effectively. However, changing the order of composables still involves recomposition to reflect the updated UI accurately.