CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composecompose-recomposition
TomT
TomT

Reputation: 23

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

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.

Upvotes: 2

Views: 100

Answers (2)

tyg
tyg

Reputation: 15803

@Abdo21's answer is correct, I just want to add another solution to the problem: Make Cards an immutable data class.

data class Cards(
    val number: Int = 3,
)

number is a val now so it can never change. This makes Cards immutable and therefore the incNum function isn't needed anymore. Instead you would create a new object when you want to increase number. Your Composable would then look like this:

@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)
        }) {
            Text(
                text = "Clicks: ${myCard.number}",
                fontSize = 50.sp,
            )
        }
    }
}

Creating a new instance each time may seem a bit excessive, but it is quite performant and solves a lot of problems around Compose functions that work best (or even at all) when objects do not mutate (except when explicitly wrapped in a MutableState). Immutability is also the recommended way to go when you use a view model to store your state.

Upvotes: 0

Abdo21
Abdo21

Reputation: 1552

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
            )
        }
    }
}

Upvotes: 0

Related Questions