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

@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.