title: Jetpack Compose saving state on orientation change
body: <p>I am using Android Jetpack's Compose and have been trying to figure out how to save state for orientation changes.</p>
  <p>My train of thought was making a class a ViewModel. As that generally worked when I would work with Android's traditional API.</p>
  <p>I have used remember {} and mutableState {} to update the UI when information has been changed.
  Please validate if my understanding is correct...</p>
  <p>remember = Saves the variable and allows access via .value, this allows values to be cache. But its main use is to not reassign the variable on changes.</p>
  <p>mutableState = Updates the variable when something is changed.</p>
  <p>Many blog posts say to use @Model, however, the import gives errors when trying that method.
  So, I added a : ViewModel()</p>
  <p>However, I believe my remember {} is preventing this from working as intended?</p>
  <p>Can I get a point in the right direction?</p>
  <pre><code>@Composable
  fun DefaultFlashCard() {
  
      val flashCards = remember { mutableStateOf(FlashCards())}
      
  
      Spacer(modifier = Modifier.height(30.dp))
  
      MaterialTheme {
  
  
          val typography = MaterialTheme.typography
          var question = remember { mutableStateOf(flashCards.value.currentFlashCards.question) }
  
  
  
          Column(modifier = Modifier.padding(30.dp).then(Modifier.fillMaxWidth())
                  .then(Modifier.wrapContentSize(Alignment.Center))
                  .clip(shape = RoundedCornerShape(16.dp))) {
              Box(modifier = Modifier.preferredSize(350.dp)
                      .border(width = 4.dp,
                              color = Gray,
                              shape = RoundedCornerShape(16.dp))
                      .clickable(
                              onClick = {
                                  question.value = flashCards.value.currentFlashCards.answer })
                      .gravity(align = Alignment.CenterHorizontally),
                      shape = RoundedCornerShape(2.dp),
                      backgroundColor = DarkGray,
                      gravity = Alignment.Center) {
                  Text(&quot;${question.value}&quot;,
                          style = typography.h4, textAlign = TextAlign.Center, color = White
                  )
              }
          }
  
          Column(modifier = Modifier.padding(16.dp),
                  horizontalGravity = Alignment.CenterHorizontally) {
  
              Text(&quot;Flash Card application&quot;,
                      style = typography.h6,
                      color = Black)
  
              Text(&quot;The following is a demonstration of using &quot; +
                      &quot;Android Compose to create a Flash Card&quot;,
                      style = typography.body2,
                      color = Black,
                      textAlign = TextAlign.Center)
  
              Spacer(modifier = Modifier.height(30.dp))
              Button(onClick = {
                  flashCards.value.incrementQuestion();
                  question.value = flashCards.value.currentFlashCards.question },
                      shape = RoundedCornerShape(10.dp),
                      content = { Text(&quot;Next Card&quot;) },
                      backgroundColor = Cyan)
          }
      }
  }
  
  
  data class Question(val question: String, val answer: String) {
  }
  
  
  class FlashCards: ViewModel() {
  
      var flashCards = mutableStateOf( listOf(
              Question(&quot;How many Bananas should go in a Smoothie?&quot;, &quot;3 Bananas&quot;),
              Question(&quot;How many Eggs does it take to make an Omellete?&quot;, &quot;8 Eggs&quot;),
              Question(&quot;How do you say Hello in Japenese?&quot;, &quot;Konichiwa&quot;),
              Question(&quot;What is Korea's currency?&quot;, &quot;Won&quot;)
      ))
  
      var currentQuestion = 0
  
      val currentFlashCards
          get() = flashCards.value[currentQuestion]
  
      fun incrementQuestion() {
          if (currentQuestion + 1 &gt;= flashCards.value.size) currentQuestion = 0 else currentQuestion++
      }
  }
  
  </code></pre>