Why can't a State<T> variable fire UI update when it is assigned by a new value?

Question

The Code A is based a Android offical sample project here.

The Code A can display correct data in UI.

If I use Code B, I find that nothing is displayed.

It seems that _uiState=_uiState.copy(...) doesn't make uiState to notice UI that the data has changed in Code B.

What is wrong with Code B?

Code A

class InterestsViewModel( private val interestsRepository: InterestsRepository ) : ViewModel() { // UI state exposed to the UI private var _uiState by mutableStateOf (InterestsUiState(loading = true)) //My val uiState: InterestsUiState = _uiState //My private fun refreshAll() { _uiState .loading = true //My viewModelScope.launch { // Trigger repository requests in parallel val topicsDeferred = async { interestsRepository.getTopics() } val peopleDeferred = async { interestsRepository.getPeople() } val publicationsDeferred = async { interestsRepository.getPublications() } // Wait for all requests to finish val topics = topicsDeferred.await().successOr(emptyList()) val people = peopleDeferred.await().successOr(emptyList()) val publications = publicationsDeferred.await().successOr(emptyList()) _uiState.loading=false //My _uiState.topics=topics //My _uiState.people=people //My _uiState.publications=publications //My } } } fun rememberTabContent(interestsViewModel: InterestsViewModel): List<TabContent> { // UiState of the InterestsScreen val uiState = interestsViewModel.uiState //My ... } data class InterestsUiState( var topics: List<InterestSection> = emptyList(), //My var people: List<String> = emptyList(), //My var publications: List<String> = emptyList(), //My var loading: Boolean = false, //My )

Code B

class InterestsViewModel( private val interestsRepository: InterestsRepository ) : ViewModel() { // UI state exposed to the UI private var _uiState by mutableStateOf (InterestsUiState(loading = true)) val uiState: InterestsUiState = _uiState private fun refreshAll() { _uiState .loading = true viewModelScope.launch { // Trigger repository requests in parallel val topicsDeferred = async { interestsRepository.getTopics() } val peopleDeferred = async { interestsRepository.getPeople() } val publicationsDeferred = async { interestsRepository.getPublications() } // Wait for all requests to finish val topics = topicsDeferred.await().successOr(emptyList()) val people = peopleDeferred.await().successOr(emptyList()) val publications = publicationsDeferred.await().successOr(emptyList()) _uiState=_uiState.copy( loading = false, topics = topics, people = people, publications = publications ) } } }

Is your code A working? Isn't this the same as Code B in this question which wasn't working? — Arpit Shukla
– Arpit Shukla, Commented Oct 27, 2021 at 5:58
if your UI depends on attributes I think it will not change, till the object reference is not changed for the mutable state. — DeePanShu
– DeePanShu, Commented Oct 27, 2021 at 6:05
To Arpit Shukla: Thanks. The Code A can works well, I don't know why. You can download it to test dropbox.com/s/5wuz1zrprgna3di/JetNews.zip?dl=0 — HelloCW
– HelloCW, Commented Oct 27, 2021 at 7:02

Johann · Accepted Answer · 2021-10-27 06:52:40Z

1

I don't see your pattern described in the official docs:

https://developer.android.com/jetpack/compose/state

It is possible it worked under an older version of Compose and doesn't work under the current version??

According to the docs, recomposition can only occur when you use mutableStateOf in conjunction with a remember and set the value property to a new value to trigger the recomposition:

val someProperty = remember { mutableStateOf(0) } someProperty.value = 123

But this is done in a composable. If you want to trigger this within your viewmodel, you should resort to using LiveData. Here's an example:

https://stackoverflow.com/a/69718724/753632

Using mutableStateOf on its own doesn't trigger recomposition. It is only used to store the state.

edited Oct 27, 2021 at 6:52

answered Oct 27, 2021 at 6:47

Johann

30k45 gold badges189 silver badges326 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HelloCW Over a year ago

Thanks! Now the project use ext.compose_version = '1.1.0-alpha06', Code A can works well, I don't know why, You can download it to test dropbox.com/s/5wuz1zrprgna3di/JetNews.zip?dl=0

HelloCW Over a year ago

Thanks again ! In the article stackoverflow.com/a/69718724/753632 , "you need not remember when the MutableState is inside view model". So what you said "recomposition can only occur when you use mutableStateOf in conjunction with a remember and set the value property to a new value to trigger the recomposition" is right?

Johann Over a year ago

I just ran a test to see if you can use mutableStateOf in a viewmodel. You can use this instead of LiveData but you are still stuck with the same issue of no recomposition happening if you update your object's properties. Observables only detect changes to the objects they are bound to and not to their properties. You could create a new object and set the "value" property but that is usually not a great idea. The solution I gave in the link works by using a general purpose trigger observable that updates when a random number is used. You still need to set the "value" property.

Johann Over a year ago

I updated the code in the linked post to show it using mutableStateOf instead of using LiveData.

Collectives™ on Stack Overflow

Why can't a State<T> variable fire UI update when it is assigned by a new value?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related