Jetpack Compose Button recomposed unnecessary

40 Views Asked by At

I have just a simple application having two class MainActivity and MainViewModel. I am sharing the code for the reference:

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val viewModel = ViewModelProvider(this).get(MainViewModel::class.java)

        setContent {
            TryingSomethingTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var name by remember {
                        mutableStateOf("")
                    }
                    var address by remember {
                        mutableStateOf("")
                    }
                    Column {
                        OutlinedTextField(value = name, onValueChange = { name = it })
                        OutlinedTextField(value = address, onValueChange = { address = it })
                        Button(onClick = {
                            viewModel.join()
                        }) {
                            Text(text = "Join")
                        }
                    }
                }
            }
        }
    }
}

Here is code for MainViewModel:

class MainViewModel: ViewModel() {
    fun join() {
        // currently no code here
    }
}

The concern is whenever I type something in TextField then the Button is also recomposed although there is not state changes for the Button. I am sharing image for the recomposition count for the reference:

Recomposition Counts

0

There are 0 best solutions below