Jetpack Compose State: Modify class property

Question

The below two examples simply add an 'a' to a given default value. The compose_version used is 1.0.0-alpha03 which is the latest as of today (to my knowledge).

This example is most similar to most examples I've found during my research.

Example 1

@Composable
fun MyScreen() {
    val (name, setName) = remember { mutableStateOf("Ma") }

    Column {
        Text(text = name) // 'Ma'
        Button(onClick = {
                setName(name + "a") // change it to 'Maa'
        }) {
            Text(text = "Add an 'a'")
        }
    }
}

However, this isn't always practical. Say for example, the data was more complex than a single field. A class for instance, or even a Room data class.

Example 2

// the class to be modified
class MyThing(var name: String = "Ma");


@Composable
fun MyScreen() {
    val (myThing, setMyThing) = remember { mutableStateOf(MyThing()) }

    Column {
        Text(text = myThing.name) // 'Ma'
        Button(onClick = {
                var nextMyThing = myThing
                nextMyThing.name += "a" // change it to 'Maa'
                setMyThing(nextMyThing)
        }) {
            Text(text = "Add an 'a'")
        }
    }
}

Of course, Example 1 works, but Example 2 does not. Is this a simple error on my part, or am I missing the larger picture about how I should go about modifying this class instance?

EDIT:

I have sort of found a way to make this work, but it seems inefficient. It does line up with how React manages state however, so maybe it is the correct way to do it.

The issue in Example 2 quite clearly is that myNextThing is not a copy of the original myThing, but rather a reference to it. Just like React, Jetpack Compose seems to want an entirely new object when modifying the state. This can be done in one of two ways:

Creating a new instance of the MyThing class, changing what one needs to change, and then calling setMyThing() with the new class instance
Changing class MyThing to data class MyThing and using the copy() function to create a new instance with the same properties. Then, change the desired property and call setMyThing(). This is the best way in the context of my question given that I explicitly stated that I would like to use this to modify the data on a given data class used by Android Room.

Example 3 (functional)

// the class to be modified
data class MyThing(var name: String = "Ma");


@Composable
fun MyScreen() {
    val (myThing, setMyThing) = remember { mutableStateOf(MyThing()) }

    Column {
        Text(text = myThing.name) // 'Ma'
        Button(onClick = {
                var nextMyThing = myThing.copy() // make a copy instead of a reference
                nextMyThing.name += "a" // change it to 'Maa'
                setMyThing(nextMyThing)
        }) {
            Text(text = "Add an 'a'")
        }
    }
}

foxtrotuniform6969 foxtrotuniform6969 · Accepted Answer · 2020-09-18T14:56:07

Indeed, it appears to me that the best way to go about this is to copy() a data class.

A full and useful example using reflection (to allow the modification of my different types of properties might look like this:

// the class to be modified
data class MyThing(var name: String = "Ma", var age: Int = 0);


@Composable
fun MyScreen() {
    val (myThing, setMyThing) = remember { mutableStateOf(MyThing()) }

    // allow the `onChange()` to handle any property of the class
    fun <T> onChange(field: KMutableProperty1<MyThing, T>, value: T) {
        // copy the class instance
        val next = myThing.copy()
        // modify the specified class property on the copy
        field.set(next, value)
        // update the state with the new instance of the class
        setMyThing(next)
    }

    Column {
        Text(text = myThing.name)
        // button to add "a" to the end of the name
        Button(onClick = { onChange(MyThing::name, myThing.name + "a") }) {
            Text(text = "Add an 'a'")
        }
        // button to increment the new "age" field by 1
        Button(onClick = { onChange(MyThing::age, myThing.age + 1) }) {
            Text(text = "Increment age")
        }
    }
}

While it may be that instantiating a copy of the class in state every time the button is click (or the keyboard is pressed in a real-world use case with a TextField instead of a button) may be a bit wasteful for larger classes, it generally seems as though the Compose framework would prefer this approach. As stated, this falls in line with the way that React does things: state is never modified or appended, it is always completely replaced.

An alternative approach, however, would be most welcome.

Jetpack Compose State: Modify class property

3 Answers