title: Update UI State in Realtime after Room Database Changes using Kotlin Flow
body: <p>I have a Jetpack Compose Picture App where the user views Cached Photos from ROOM Database. The database has a <code>isFavorite</code> column which stores Booleans and is updated when the user clicks to like the photo.</p>
  <p>This is my <em><strong>dao</strong></em></p>
  <pre><code>@Query(&quot;SELECT * FROM astrophotoentity&quot;)
  suspend fun getSavedAstroPhotos(): Flow&lt;List&lt;AstroPhotoEntity&gt;&gt;
  
  @Query(&quot;UPDATE astrophotoentity SET isFavorite =:isFavorite WHERE id=:id&quot;)
  suspend fun updateIsFavoriteStatus(id: String,isFavorite:Boolean)
  </code></pre>
  <p>This is my <em><strong>Repository</strong></em> code</p>
  <pre><code>override suspend fun updateIsFavoriteStatus(photo: AstroPhoto, isFavorite:Boolean) {
          dao.updateIsFavoriteStatus(photo.date,isFavorite)
      }
  </code></pre>
  <p>I am using a <em><strong>use case class</strong></em> for clean architecture.</p>
  <p>class UpdateIsFavoriteStatusUseCase (private val repository: AstroRepository) {</p>
  <pre><code>suspend operator fun invoke(photo: AstroPhoto, isFavorite:Boolean){
  
      repository.updateIsFavoriteStatus(photo, isFavorite)
  }
  </code></pre>
  <p>}</p>
  <p>I also use a <em><strong>simple data class to hold state</strong></em> for the ViewModel.</p>
  <pre><code>data class PhotoState(
      val astroPhotos: List&lt;AstroPhoto&gt; = emptyList(),
      val isPhotosListLoading: Boolean = false,
      val errorMessage: String? = null)
  </code></pre>
  <p>This is the <em><strong>ViewModel</strong></em> which initializes the Photo State list to a list fetched from the DB. I use <code>mutableStateOf()</code> to hold the photo objects list. Here I update isFavorite column in the database depending on the passed event.</p>
  <pre><code> @HiltViewModel
      class OverviewViewModel @Inject constructor(
          private val useCaseContainer: UseCaseContainer
      ) : ViewModel() {
      
          var state by mutableStateOf(PhotoState())
              private set
      
      init {
  
  //set the state to the retrieved list of photo objects
  ... getPhotosListFromDb() 
  }
      
       fun onEvent(event: OverviewEvent) { ....
  
       is OverviewEvent.OnMarkFavorite -&gt; { ....
      
        useCaseContainer.updateIsFavoriteStatus(event.photo, event.isFavorite)}
      
        is OverviewEvent.OnRemoveFromFavorites -&gt; { ....
              
      useCaseContainer.updateIsFavoriteStatus(event.photo, event.isFavorite)}
  </code></pre>
  <p>I pass the Photos list to the below <em><strong>composable</strong></em>.</p>
  <pre><code>@Composable
  fun AstroPhotoComposable(
  photo: AstroPhoto,
  onMarkAsFavorite: () -&gt; Unit,
  onRemovePhoto: () -&gt; Unit = {}
  ) {
  //retrieve the isFavorite state using photo.isFavorite and cache it
    var isFavorite by remember{ mutableStateOf(photo.isFavorite) ... }
  </code></pre>
  <p>The issue I am facing is that when the photo changes from <code>isFavorite/!isFavorite</code> the state is not reflecting live on the UI.</p>
  <p>I have read somewhere about cold and hot kotlin flows but I'm yet to wrap my head around this. I also tried to replace <code>mutableStateOf</code> with <code>MutableStateFlow</code> but the state is not updating on Database Changes.</p>
  <p>Basically, I am looking to observe for database changes and get an up-to-date state similar to <code>LiveData</code>.</p>
  <p>Any help is appreciated.</p>