<p>In this article we created a guideline that can help you understand the state concept in android, why do we need state and how do we manage state in compose.</p>
<h2>State in Software Development</h2>
<p>If you encounter with finite state machines before, you already have an idea about state.<br />
But if you didn’t, don’t worry you will learn what is the meaning of the state for software development:</p>
<div id="attachment_3547" style="width: 1366px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-3547" class="size-full wp-image-3547" src="https://ac.appcircle.io/wp-content/uploads/2022/09/X-MBGnEy.png" alt="Finite State Machine Diagram" width="1356" height="673" srcset="https://ac.appcircle.io/wp-content/uploads/2022/09/X-MBGnEy.png 1356w, https://ac.appcircle.io/wp-content/uploads/2022/09/X-MBGnEy-300x149.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/09/X-MBGnEy-1030x511.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/09/X-MBGnEy-768x381.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/09/X-MBGnEy-705x350.png 705w" sizes="(max-width: 1356px) 100vw, 1356px" /><p id="caption-attachment-3547" class="wp-caption-text">Finite State Machine</p></div>
<p>In given diagram “before, inside, after” are the states of the finite state machine and similarly in software development we have states of our application which changes according to user input, data, sensors and so on.</p>
<h3>Is State Necessary For Android?</h3>
<p>Having a state in android application is inevitable. If we take a look at android’s state definition:</p>
<blockquote><p>State in an app is any value that can change over time. This is a very broad definition and encompasses everything from a Room database to a variable on a class.</p></blockquote>
<p>Like android says, it almost covers everything about android application! For example:</p>
<ul>
<li>If a button makes a color change when it clicked, it has to hold a state about whether it clicked or not.</li>
<li>If you want to show a toast message when network request returned success, you need to have a state about the network request status.</li>
</ul>
<p>In the end, yes having a state is necessary for android and you have to manage it somehow.</p>
<h2>State Management In Android</h2>
<p><strong>Before Jetpack Compose</strong>, Android developers where using viewModels and Saved Instance States as an option for managing and storing application’s user interface states.<br />
To make it more clear we can give an example:</p>
<p>Let’s say user is in register screen and has to type the code that sent to given email address.<br />
If we don’t store(manage) the data that user typed in a state:</p>
<p>When user opens gmail from recent apps to get last digit of the code and comes back to register screen, all digits will be gone from register screen.</p>
<p>But if we store the typed data into viewModel in <strong>onPause()</strong> and restore it in <strong>onResume()</strong> we will manage our state successfully.</p>
<h3>State and Lifecycle</h3>
<p>We talked about <strong>onPause()</strong> and <strong>onResume()</strong> methods which are related to activity/fragment lifecycle. That means there must be a set of rules for states and a relationship between the application lifecycles’ and the states:</p>
<div id="attachment_3548" style="width: 1290px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-3548" class="size-full wp-image-3548" src="https://ac.appcircle.io/wp-content/uploads/2022/09/cfrXRDj3.jpeg" alt="Jetpack Compose State Management: The Activity Lifecycle Diagram" width="1280" height="720" srcset="https://ac.appcircle.io/wp-content/uploads/2022/09/cfrXRDj3.jpeg 1280w, https://ac.appcircle.io/wp-content/uploads/2022/09/cfrXRDj3-300x169.jpeg 300w, https://ac.appcircle.io/wp-content/uploads/2022/09/cfrXRDj3-1030x579.jpeg 1030w, https://ac.appcircle.io/wp-content/uploads/2022/09/cfrXRDj3-768x432.jpeg 768w, https://ac.appcircle.io/wp-content/uploads/2022/09/cfrXRDj3-705x397.jpeg 705w" sizes="(max-width: 1280px) 100vw, 1280px" /><p id="caption-attachment-3548" class="wp-caption-text">The Activity Lifecycle</p></div>
<ol>
<li>State must be reactive to lifecycle events. (ex. Clear state in onDestroy)</li>
<li>State must not extend it’s scope. (Storing the state even if the corresponding screen is not alive)</li>
<li>State must not cause memory leaks.</li>
</ol>
<h2>State management in Jetpack Compose</h2>
<p>Android claims that: “Jetpack Compose helps you be explicit about where and how you store and use state in an Android app.” So let’s see how we do state management in jetpack compose:</p>
<p>In our <a href="https://blog.appcircle.io/article/jetpack-compose-101-the-basics" target="_blank" rel="noreferrer nofollow noopener">previous article</a> we mentioned that jetpack compose is declarative, so only way to update it is by calling again with new arguments. So when user enter characters into textfield we have to call our composable again with typed characters.</p>
<p>Let’s take a look at the android’s sample code:</p>
<pre><code class="language-kotlin">@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       Text(
           text = &quot;Hello!&quot;,
           modifier = Modifier.padding(bottom = 8.dp),
           style = MaterialTheme.typography.h5
       )
       OutlinedTextField(
           value = &quot;&quot;,
           onValueChange = { },
           label = { Text(&quot;Name&quot;) }
       )
   }
}</code></pre>
<p>When this code runs, textfield doesn’t update itself. We need to update value parameter to observe changes in user interface.</p>
<p><strong>Note:</strong> Key terms that defined by android:</p>
<ol>
<li>Composition: a description of the UI built by Jetpack Compose when it executes composables.</li>
<li>Initial composition: creation of a Composition by running composables the first time.</li>
<li>Recomposition: re-running composables to update the Composition when data changes.</li>
</ol>
<p>If you want to get more detail about recomposition it is explained in this <a href="https://developer.android.com/jetpack/compose/mental-model#recomposition" target="_blank" rel="noopener nofollow">article</a>.</p>
<p>So in order to fix textfield’s bug, we have to store our state and trigger recomposition each time when our state changes.</p>
<h3>Remember Key Word</h3>
<p>Jetpack compose can use remember api to store state(any object in particular) at initial composition and value will be available on recompositions. If we rewrite our code with remember:</p>
<pre><code class="language-kotlin">@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       var name by remember { mutableStateOf(&quot;&quot;) }
       if (name.isNotEmpty()) {
           Text(
               text = &quot;Hello, $name!&quot;,
               modifier = Modifier.padding(bottom = 8.dp),
               style = MaterialTheme.typography.h5
           )
       }
       OutlinedTextField(
           value = name,
           onValueChange = { name = it },
           label = { Text(&quot;Name&quot;) }
       )
   }
}</code></pre>
<p>Now each time user enters character, variable name will be updated. Name variable is a mutableStateOf String which used with remember API. Recomposition will trigger when state that used by composable function changes and since it covered with remember new value won’t be lost in recomposition.</p>
<p><strong>Note:</strong> If we want to store our state in configuration changes as well (such as scren rotation), we must use rememberSaveable API.</p>
<p>Jetpack Compose supports common observable types for android:</p>
<ol>
<li><a href="https://developer.android.com/topic/libraries/architecture/livedata" target="_blank" rel="noreferrer nofollow noopener">LiveData</a></li>
<li><a href="https://developer.android.com/kotlin/flow" target="_blank" rel="noreferrer nofollow noopener">Flow</a></li>
<li><a class="attrlink" href="https://developer.android.com/reference/kotlin/androidx/compose/runtime/rxjava2/package-summary" target="_blank" rel="noreferrer nofollow noopener">RxJava2</a></li>
</ol>
<h3>Stateful and Stateless</h3>
<p>Whenever a composable function stores state with remember it becomes stateful. This makes composable harder to test and reuse. However, if a composable follows state hoisting it will be open for testing and reusability. Both approaches are meaningful in their own context.</p>
<h3>ViewModel as State Source of Truth</h3>
<p>There are multiple source of truth approaches for jetpack compose states: Composables, State holders and ViewModels. In this article we talk about viewModels as state source of truth:<br />
ViewModels are good for state source of truth because:</p>
<ol>
<li>They access to business logic and prepare data for user interface.</li>
<li>ViewModels have longer lifetime than composables.</li>
</ol>
<h2>Conclusion</h2>
<p>In this article, we explained what is state, why it is needed for android, how do we manage state in android and compose. We also talked about remember API, stateful and stateless concepts and finally, viewModel as state source of truth.</p>
<h2>What’s Next?</h2>
<p>There are:</p>
<ul>
<li><a href="https://developer.android.com/codelabs/jetpack-compose-state" target="_blank" rel="noreferrer nofollow noopener">Codelabs</a> for using state in jetpack compose</li>
<li><a href="https://www.youtube.com/watch?v=rmv2ug-wW4U" target="_blank" rel="noreferrer nofollow noopener">Videos</a> for compose and state</li>
</ul>
<h2>References</h2>
<ol>
<li><a href="https://commons.wikimedia.org/wiki/File:Finite-state_machine_state-diagram.png" target="_blank" rel="noreferrer nofollow noopener">Finite State Machine Diagram</a></li>
<li><a href="https://developer.android.com/jetpack/compose/state" target="_blank" rel="noreferrer nofollow noopener">State and Jetpack Compose</a></li>
<li><a href="https://www.youtube.com/watch?v=UJN3AL4tiqw" target="_blank" rel="noreferrer nofollow noopener">The Activity Lifecycle Explained &#8211; Android Studio Tutorial</a></li>
</ol>


Save time, reduce costs and increase developer productivity now.

Jetpack Compose: State Management

Related Posts

Automate Your Mobile Code Reviews with Danger CI

Deploy iOS and Android Apps to AWS Device Farm and Run Tests

Re-Signing App Binaries Made Easy with Appcircle

How to Use Environment Variables with Gradle

Jetpack Compose: State Management

Related Posts

Automate Your Mobile Code Reviews with Danger CI

Deploy iOS and Android Apps to AWS Device Farm and Run Tests

Re-Signing App Binaries Made Easy with Appcircle

How to Use Environment Variables with Gradle

Subscribe to Appcircle Circle