view doesn't get recomposes when mutable list changes

Question

I have an application that has a statelist in the viewmodel. and i have function that adds a number in the list. when i click on a button, it adds the number in the list. but the changes is not getting reflected in another view.

MainActivity.kt

class MainActivity : ComponentActivity() {

    private val viewModel by viewModels<MainViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {

                    Column {
                        Button(onClick = {viewModel.increaseCounter()}) {
                            Text("Increase counter")
                        }
                        CountView(viewModel.counter)
                    }
                }
            }
        }
    }
}

@SuppressLint("CoroutineCreationDuringComposition")
@Composable
fun CountView(count: List<Int>) {
    var coroutineScope = rememberCoroutineScope()

    coroutineScope.launch {
        Log.d("inside the coroutine ${count}")
    }
}

MainViewModel.kt

class MainViewModel: ViewModel() {

    var counter = mutableStateListOf<Int>()

    fun increaseCounter() {
        Log.d(">>>", "in viewmodel ${counter.size}")
        counter.add(1)
    }
}

Desired Result: Whenever i click on the button the log has to printed because it adds a number in the mutableStateList.

But when i change the mutableStateListOf into mutableStateOf and store some integer and change the integer the view gets recomposes and prints the log when i click on the button

Phil Dukhov · Accepted Answer · 2021-10-12 07:00:59Z

3

The main problem of your function not recomposing, is that you're not using the value for the view itself, so Compose caches it. If you add Text(count.joinToString { it.to() }) to your view, it'll will work.

But first of all you shouldn't use coroutines directly from composable functions. And adding @SuppressLint("CoroutineCreationDuringComposition") is not the correct solution to the error IDE shows to you:

Calls to launch should happen inside a LaunchedEffect and not composition

So instead your code should look like this:

@Composable
fun CountView(count: List<Int>) {
    LaunchedEffect(count) {
        println("inside the coroutine $count")
    }
}

This will also not work in your case, because with mutableStateListOf, LaunchedEffect compares key by pointer, and as this is still the same container, LaunchedEffect will not be relaunched. To compare by references it's cleaner to pass a plain list:

CountView(viewModel.counter.toList())

Note that inside LaunchedEffect you're already inside coroutine scope and can run suspend functions.

rememberCoroutineScope is usually used when you need to launch a coroutine from other side effects, like button click.

Read move about side effects in documentation

answered Oct 12, 2021 at 7:00

Phil Dukhov

91.1k22 gold badges276 silver badges302 bronze badges

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

2 Comments

Venkataramanan Over a year ago

but .toList() will take extra O(n) timing right?... is there any other better ways?

Phil Dukhov Over a year ago

@Venkataramanan As I said, if you'll use array values with views(which is usual thing), you won't need to convert to list. LaunchedEffect is gonna calculate hash and it'll take O(n) anyway. Otherwise, if you don't need that data for the view, and only for a side effect, consider adding some other variable which make sure the view updated, like a counter which will increase each time you update the data.

Collectives™ on Stack Overflow

view doesn't get recomposes when mutable list changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related