Search code examples
androidandroid-jetpack-composeandroid-jetpack-navigationjetpack-compose-navigationcompose-recomposition

Jetpack Compose NavHost recomposition composable multiple times


I found out that the composable screens are getting recomposition multiple times during navigation from Navhost compose the following example shows how I'm integrating the navigation with logs to identify how many time the function is getting called,

internal sealed class Screen(val route: String) {
  object Splash : Screen("splash")
  object Login : Screen("login")
  object Credentials : Screen("credentials/{type}") {
    fun createRoute(type: String) = "credentials/$type"
  }
}

@Composable
fun HostNavGraph(
  modifier: Modifier = Modifier,
  startDestination: String = Splash.route,
) {
  val navController = rememberNavController()
  val vm: CredentialsViewModel = getViewModel()
  NavHost(navController = navController, startDestination = startDestination, modifier = modifier) {
    composable(route = Splash.route) {
      Log.e("composable", " Splash")
      SplashScreen(openLogin = {
        navController.navigate(Login.route)
      }, openRegistration = { type ->
        navController.navigate(Credentials.createRoute(type))
      })
    }
    composable(route = Login.route) {
      Log.e("composable", " Login")
      val context = LocalContext.current
      LoginScreen(openRegistration = { type ->
        navController.navigate(Credentials.createRoute(type))
        {
          popUpTo(Splash.route) { inclusive = false }
        }

      }, openWebView = {
        openWebView(context, it)
      })
    }
    //..
  }
}

And after running the code this is how the navigation behaves after Opening Splash once then Opening LoginScreen once

15:05:14 E/composable:  Splash 
15:05:14 E/composable:  Splash 
15:05:25 E/composable:  Splash 
15:05:25 E/composable:  Login  
15:05:26 E/composable:  Splash 
15:05:26 E/composable:  Login  
15:05:26 E/composable:  Login  

I also tried some Google examples with Navigation compose, it behaves the same way, so is this an intended behavior?? or is it a bug
navigation_version = '2.4.0-alpha08'


Solution

  • I'm not sure but I think the NavHost has a built-in animation whenever there is a transition. and with the animation, the recomposition could happen frequently as often as every frame.

    A composable function might be run quite frequently, as often as every frame of an animation.

    **Android compose