I’m working with the compose runtime library and I...

# compose

[Sterling Albury]

I’m working with the compose runtime library and I’ve got a custom Modifier function that takes a mutable list, but I’m not getting recompositions when I update the list. I’m only seeing recompositions if I create a new instance of the list. I’ve tried using a mutable state list but that doesn’t seem to help. Is this expected?
my modifier function looks like

fun Modifier.foo(
    fooList: List<Foo>
): Modifier = this.then(
    FooModifierElement(fooList)
)

my composable content:

var fooList by mutableStateOf(mutableListOf<Foo>())
setContent {
    CustomComposable(modifier = Modifier.foo(fooList))
}

if I just add something to the list, nothing happens, but if I assign fooList to a new list instance, then it recomposes. Is there a way to be able to just update the list and trigger a recomposition?

[Alexander Maryanovsky]

Yes, this is expected. The composition doesn’t know that you changed the list.

[Alexander Maryanovsky]

You need to either pass a new list whenever it changes, or use SnapshotStateList

[Alexander Maryanovsky]

SnapshotStateList notifies the composition whenever any of its values changes.

[Sterling Albury]

ok, right on. thanks

[Sterling Albury]

i had actually tried this with mutableStateListOf but don’t see the recompositions.

[Alexander Maryanovsky]

@Composable
fun Items(list: List<Int>) {
    Column {
        for (item in list) {
            Text(item.toString())
        }
    }
}

setContent {
    val list = remember { mutableStateListOf(0) }
    Column {
        Button(onClick = { list.add(list.size) }){
            Text("Click me")
        }
        Items(list)
    }
}

[Sterling Albury]

I’m defining my list outside of setContent so I’m not able to use remember …maybe this is part of my problem

[Alexander Maryanovsky]

No, this will work the same:

@Composable
fun Items(list: List<Int>) {
    Column {
        for (item in list) {
            Text(item.toString())
        }
    }
}

val list = mutableStateListOf(0)

@Composable
fun App() {
    Column {
        Button(onClick = { list.add(list.size) }){
            Text("Click me")
        }
        Items(list)
    }
}

[Sterling Albury]

hmm..for some reason I’m not seeing it work in my code. let me see if I can create a sample project that shows more of how i have things set up

[Zach Klippenstein (he/him) [MOD]]

If you’re only reading the list inside your modifier, then recomposition isn’t involved. Something needs to be observing snapshot reads in your modifier in order to invalidate itself when the list changes. Unlike many of the Modifier.foo factory functions, many of the Modifier.Node interfaces don’t observe snapshot reads, so you will need to wire that up yourself.