title: How to properly use StateFlow with Jetpack compose?
body: <p>I'm doing a API call in the ViewModel and observing it in the composable like this:</p>
  <pre><code>class FancyViewModel(): ViewModel(){
   private val _someUIState =
       MutableStateFlow&lt;FancyWrapper&gt;(FancyWrapper.Nothing)
   val someUIState: StateFlow&lt;FancyWrapper&gt; =
       _someUIState
  
   fun attemptAPICall() = viewModelScope.launch {
    _someUIState.value = FancyWrapper.Loading
    when(val res = doAPICall()){
     is APIWrapper.Success -&gt; _someUIState.value = FancyWrapper.Loading(res.vaue.data)
     is APIWrapper.Error -&gt; _someUIState.value = FancyWrapper.Error(&quot;Error!&quot;)
    }
   }
  }
  </code></pre>
  <p>And in composable, I'm listening to 'someUIState' like this:</p>
  <pre><code>@Composable
  fun FancyUI(viewModel: FancyViewModel){
  
   val showProgress by remember {
      mutableStateOf(false)
   }
   val openDialog = remember { mutableStateOf(false) }
  
   val someUIState =
      viewModel.someUIState.collectAsState()
   
   when(val res = someUIState.value){
    is FancyWrapper.Loading-&gt; showProgress = true
    is FancyWrapper.Success-&gt; {
       showProgress = false
       if(res.value.error)
        openDialog.value = true
       else
       navController.navigate(Screen.OtherScreen.route)
      }
    is FancyWrapper.Error-&gt; showProgress = false
   }
  
   if (openDialog.value){
    AlertDialog(
     ..
    )
   }
  
   Scaffold(
    topBar = {
     Button(onClick={viewModel.attemptAPICall()}){
      if(showProgress)
       CircularProgressIndicator()
      else
       Text(&quot;Click&quot;)
      }
     }
   ){
    SomeUI()
   }
  
  }
  </code></pre>
  <p>The problem I'm facing is someUIState's 'when' block code in FancyUI composable is triggered multiple times during composable recomposition even without clicking the button in Scaffold(for eg: when AlertDialog shows up). Where am I doing wrong? What are the correct better approaches to observe data with StateFlow in Composable?</p>