{"id":60879,"date":"2024-03-26T09:49:21","date_gmt":"2024-03-26T04:19:21","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60879"},"modified":"2024-03-28T09:51:58","modified_gmt":"2024-03-28T04:21:58","slug":"jetpack-compose-managing-state-of-ui","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/jetpack-compose-managing-state-of-ui\/","title":{"rendered":"Jetpack Compose: Managing state of UI"},"content":{"rendered":"

In Jetpack compose state determine what is shown on UI. It is a value that changes over time. There are 2 ways to maintain state.<\/p>\n

Stateless composable<\/strong>: Stateless composable does not have any state or rely on parent state. This kind of composable does not require re- composition of UI. It is used to display static UI.<\/p>\n

Stateful composable<\/strong>: These kind of composable maintain their own state. it defines the internal state & controls it. Jetpack compose has a reactive approach for storing state in a variable, we need to use MutableStateOf or observable like LiveData, Flow, etc. for the same. When the state change, the composable recompose itself, update the new ui with the new state.<\/p>\n

Let us understand state using counter app, which increase the count upon button click.<\/p>\n

Let us create a method IncreaseCounter which is hard coded with 0<\/p>\n

\n
ComposeStateDemoTheme<\/span> {\r\n    Column<\/span>(\r\n        modifier = Modifier.fillMaxSize<\/span>(),\r\n        verticalArrangement = Arrangement.Center,\r\n        horizontalAlignment = Alignment.CenterHorizontally\r\n    ) {\r\n        IncreaseCounter<\/span>(0<\/span>)\r\n    }\r\n}<\/span><\/pre>\n
@Composable<\/span>\r\nfun<\/span> IncreaseCounter<\/span>(count: Int<\/span>)<\/span><\/span> {\r\n    var<\/span> currentCount = 0<\/span>;\r\n    Column(\r\n        horizontalAlignment = Alignment.CenterHorizontally\r\n    ) {\r\n        Text(\r\n            \"Count is : $currentCount<\/span>\"<\/span>,\r\n            style = MaterialTheme.typography.bodyLarge,\r\n            modifier = Modifier.padding(5.<\/span>dp)\r\n        )\r\n        Button(\r\n            onClick = {\r\n                currentCount = count + 1<\/span>\r\n            },\r\n\r\n            contentPadding = PaddingValues(16.<\/span>dp),\r\n            colors = ButtonDefaults.textButtonColors(\r\n                containerColor = Color.LightGray,\r\n                contentColor = Color.Black\r\n            )\r\n        ) {\r\n            Text(\"Counter Increment\"<\/span>)\r\n        }\r\n    }\r\n\r\n}<\/span><\/pre>\n<\/blockquote>\n
\n
\"\"<\/div>\n<\/figure>\n
When we run the app and click on increment button, notice that nothing is happening, that is because compose does not redraw when the state change until recomposes of composable method.<\/p>\n
This can be achieved using:<\/p>\n
MutableStateOf: <\/strong>To indicate to compose that should track an object\u2019 state, the state needs to be of type State(immutable) or MutableState (mutable).<\/p>\n
\n
ComposeStateDemoTheme {\r\n    Column(\r\n        modifier = Modifier.fillMaxSize(),\r\n        verticalArrangement = Arrangement.Center,\r\n        horizontalAlignment = Alignment.CenterHorizontally\r\n    ) {\r\n        val<\/span> count = mutableStateOf(0<\/span>)\r\n        IncreaseCounter(count)\r\n    }\r\n}<\/span><\/pre>\n<\/blockquote>\n
\n
\"\"<\/div>\n<\/figure>\n
Above as you can see, MutableStateOf<\/strong> does the work but it is not the best way, because in jetpack compose every composable function recomposes independently so it can give unexpected if we use the same variable with multiple composable methods.<\/p>\n
remember<\/strong> API<\/strong>: To instruct Compose to retain and reuse its value during recompositions, you need to declare it with the remember API. It is used as a guard against the recomposition to avoid the state being reset.<\/p>\n
\n
ComposeStateDemoTheme {\r\n    Column(\r\n        modifier = Modifier.fillMaxSize(),\r\n        verticalArrangement = Arrangement.Center,\r\n        horizontalAlignment = Alignment.CenterHorizontally\r\n    ) {\r\n        val<\/span> count = remember {\r\n            mutableStateOf(0<\/span>)\r\n        }\r\n        IncreaseCounter(count)\r\n    }\r\n}<\/span><\/pre>\n<\/blockquote>\n
The above code won\u2019t work on rotation of device i.e configuration changes etc. this can be avoided by using rememberSavable<\/strong> API.<\/p>\n
rememberSavable API<\/strong>: It is used to save values that you need if Android OS destroys and recreates the activity.<\/p>\n
\n
ComposeStateDemoTheme {\r\n        Column(\r\n            modifier = Modifier.fillMaxSize(),\r\n            verticalArrangement = Arrangement.Center,\r\n            horizontalAlignment = Alignment.CenterHorizontally\r\n        ) {\r\n            val<\/span> count by<\/span> rememberSaveable { mutableStateOf(0<\/span>) }\r\n            IncreaseCounter(count)\r\n        }\r\n    }\r\n}<\/span><\/pre>\n<\/blockquote>\n
Final Code<\/strong><\/p>\n
\n
ComposeStateDemoTheme {\r\n    Column(\r\n        modifier = Modifier.fillMaxSize(),\r\n        verticalArrangement = Arrangement.Center,\r\n        horizontalAlignment = Alignment.CenterHorizontally\r\n    ) {\r\n        var<\/span> count by<\/span> rememberSaveable { mutableStateOf(0<\/span>) }\r\n        IncreaseCounter(currentCount = count) {\r\n            count = it + 1<\/span>;\r\n        }\r\n    }\r\n}<\/span><\/pre>\n
@Composable<\/span>\r\nfun<\/span> IncreaseCounter<\/span>(currentCount: Int<\/span>, updateCount: (Int<\/span>) -> Unit<\/span>)<\/span><\/span> {\r\n    Column(\r\n        horizontalAlignment = Alignment.CenterHorizontally\r\n    ) {\r\n        Text(\r\n            \"Count is : ${currentCount}<\/span>\"<\/span>,\r\n            style = MaterialTheme.typography.bodyLarge,\r\n            modifier = Modifier.padding(5.<\/span>dp)\r\n        )\r\n        Button(\r\n            onClick = {\r\n                updateCount(currentCount)\r\n            },\r\n\r\n            contentPadding = PaddingValues(16.<\/span>dp),\r\n            colors = ButtonDefaults.textButtonColors(\r\n                containerColor = Color.LightGray,\r\n                contentColor = Color.Black\r\n            )\r\n        ) {\r\n            Text(\"Counter Increment\"<\/span>)\r\n        }\r\n    }\r\n\r\n}<\/span><\/pre>\n<\/blockquote>\n
Keep Learning<\/strong>! Keep Coding<\/strong>!
\nFollow us for more insights.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
In Jetpack compose state determine what is shown on UI. It is a value that changes over time. There are 2 ways to maintain state. Stateless composable: Stateless composable does not have any state or rely on parent state. This kind of composable does not require re- composition of UI. It is used to display […]<\/p>\n","protected":false},"author":1560,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":14},"categories":[518],"tags":[4845,5637],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60879"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1560"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60879"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60879\/revisions"}],"predecessor-version":[{"id":61016,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60879\/revisions\/61016"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}