My UI will not update when using a class property in Jetpack Compose

Question

I am new to both Kotlin and Compose. Using some online guides I have been able to create some very simple UIs. I now have a problem that one of my UIs will not recompose when I use a property of a class within a composable. Below is my code. I create a class that has an INT property which is initialized to 3 and a method that will increase the property's value. I am using the property value in the text of a button.

class Cards {
    var number: Int = 3

    fun incNum() {
        number++
    }
}

@Composable
fun TestApp() {
    val myCard by remember { mutableStateOf(Cards()) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize(),
    ) {
        Button(onClick = {
            myCard.incNum()
        }) {
            Text(
                text = "Clicks: ${myCard.number}",
                fontSize = 50.sp,
            )
        }
    }
}

When I click the button the value of the property increases but the new value does not display in the text of the button. I have used the debugger and verified that the new value of the property is maintained between clicks (3, 4, 5, etc.) but no recomposition occurs.

I don't understand why the UI will not update. Any help with this will be greatly appreciated. Let me know if you need more information about the problem.

Answer 1

The issue you're experiencing is because compose doesn't automatically observe changes in regular class properties. Compose only observes changes in state objects, which are wrapped inside MutableState. In your code, you're wrapping the Cards class in a state object, but changes to the number property inside Cards are not detected because the Cards reference itself doesn't change.

To make Compose aware of changes to the number property, you need to wrap it inside a MutableState object. This way, compose will recompose the UI whenever the value changes.

Here's how you can modify your code:

class Cards {
    //var number: Int = 3
    var number: MutableState<Int> = mutableStateOf(3)


    fun incNum() {
        number.value++
    }
}


@Composable
fun TestApp() {
    val myCard by remember { mutableStateOf(Cards()) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Button(onClick = {
            myCard.incNum()
        }) {
            Text(
                text = "Clicks: ${myCard.number.value}",
                fontSize = 50.sp
            )
        }
    }
}

Another commonly used solution is to declare your Cards class as an immutable data class. This way, you cannot change its properties directly, since changing properties directly does not trigger recomposition anyway, this approach prevents such changes. Instead, whenever you need to change a property, you create a new object with the updated data using the copy method of the data class. This changes the reference of the class, which causes compose to recompose.

Here's an example:

data class Cards(
    val number: Int = 3
)


@Composable
fun TestApp() {
    var myCard by remember { mutableStateOf(Cards()) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Button(onClick = {
            myCard = myCard.copy(number = myCard.number + 1) // create new object that hold the new data
        }) {
            Text(
                text = "Clicks: ${myCard.number}",
                fontSize = 50.sp
            )
        }
    }
}