title: Navigate with Jetpack Compose
body: <p>I was testing Compose and navigation and noticed strange behavior <em>(nav ver: androidx.navigation:navigation-compose:2.4.0-alpha10)</em> <br />
  In this example, is a screen to check if the app is up to date or not (boolean var in the code for simple test), and if yes, navigate to other screen. <br />
  The big issue I found here was that when automating the navigation, the second screen switches to the first one very quickly. But if the navigation is done with the click of a button, for example, nothing strange happens... <br /></p>
  <p>MainActivity file code:</p>
  <pre><code>class MainActivity : ComponentActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              AppTheme {
                  Surface(color = MaterialTheme.colors.background) {
                      val navController = rememberNavController()
                      NavHost(
                          navController = navController,
                          startDestination = &quot;first_screen&quot;
                      ) {
                          composable(route = &quot;first_screen&quot;) {
                              FirstScreen(navController)
                          }
                          composable(route = &quot;second_screen&quot;) {
                              SecondScreen(navController)
                          }
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  <p>FirstScreen file code:</p>
  <pre><code>@Composable
  fun FirstScreen(navController: NavController) {
      val isAppUpdated = true // switch case
      Scaffold(
          topBar = {
              TopAppBar {
                  Text(text = &quot;First Screen Bar&quot;)
              }
          }
      ) {
          Column(
              horizontalAlignment = Alignment.CenterHorizontally,
              verticalArrangement = Arrangement.Center,
              modifier = Modifier.fillMaxSize()
          ) {
              Text(
                  text = &quot;First Screen&quot;,
                  textAlign = TextAlign.Center,
                  style = MaterialTheme.typography.h4
              )
              if (!isAppUpdated) OutdatedApp()
              else {
                  // Two options to navigate: with compose button or automatically
                  // UpdatedApp {
                  //     navigateToSecondScreen(navController)
                  // }
                  navigateToSecondScreen(navController)
              }
          }
      }
  }
  
  @Composable
  fun OutdatedApp() {
      Text(
          text = &quot;Your app is out of date, consider updating it!&quot;,
          textAlign = TextAlign.Center,
          style = MaterialTheme.typography.body1
      )
  }
  
  @Composable
  fun UpdatedApp(onClick: () -&gt; Unit) {
      Button(
          onClick = { onClick() }
      ) {
          Text(
              text = &quot;Navigate to Second Screen&quot;,
              style = MaterialTheme.typography.button
          )
      }
  }
  
  private fun navigateToSecondScreen(navController: NavController) {
      navController.navigate(route = &quot;second_screen&quot;) {
          launchSingleTop
          popUpTo(route = &quot;first_screen&quot;) { inclusive = true }
      }
  }
  </code></pre>
  <p>SecondScreen file code:</p>
  <pre><code>@Composable
  fun SecondScreen(navController: NavController) {
      Scaffold(
          topBar = {
              TopAppBar {
                  Text(text = &quot;Second Screen Bar&quot;)
              }
          }
      ) {
          Column(
              horizontalAlignment = Alignment.CenterHorizontally,
              verticalArrangement = Arrangement.Center,
              modifier = Modifier.fillMaxSize()
          ) {
              Text(
                  text = &quot;Second Screen&quot;,
                  textAlign = TextAlign.Center,
                  style = MaterialTheme.typography.h4
              )
          }
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/fvGBj.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fvGBj.gif" alt="automatic" /></a> <a href="https://i.stack.imgur.com/KuSln.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KuSln.gif" alt="manual" /></a></p>
  <p>Can anyone explain what happens in these cases? <br />
  And any solution to implement this logic? <br /></p>
  <p><strong>EDIT</strong> <br />
  I did another test without <strong>Scaffold</strong> <em>on FirstScreen</em> and it looks like this problem didn't happen... <br /></p>
  <p><strong>SOLUTION</strong> <br />
  <a href="https://stackoverflow.com/a/69491725/11255734">Philip's answer</a> <br />
  <a href="https://developer.android.com/jetpack/compose/side-effects" rel="nofollow noreferrer">LaunchedEffect's documentation</a></p>