State Restoration in Jetpack Compose: Building Resilient UI States

Part of the series "Android Development Series by Mircea Ioan Soit"

In modern Android apps, providing a seamless user experience means ensuring that app states are preserved during configuration changes, such as screen rotations or when the app is sent to the background. Jetpack Compose offers robust tools for state restoration that simplify handling these scenarios.

This article delves into state restoration in Jetpack Compose, exploring how to build resilient UIs that maintain state across lifecycle events.

1. What is State Restoration?

State restoration refers to saving and restoring the UI state of an app during events like:

• Configuration changes: Screen rotation or dark mode toggle.
• Process death: When the app is killed and restarted by the system.

In Compose, managing state restoration is simpler compared to traditional Views, thanks to its declarative approach.

2. Why State Restoration Matters

Without state restoration, users might lose progress or data, leading to frustration. Imagine:

• Losing form data on rotation.
• Resetting to the home screen after multitasking.

Compose handles state restoration natively for many scenarios but allows developers to customize it as needed.

3. Built-In Support in Jetpack Compose

Jetpack Compose leverages the rememberSaveable API for state restoration. Unlike remember, which only retains state in memory, rememberSaveable persists the state across configuration changes.

Example: Counter with State Restoration

import androidx.compose.runtime.*
import androidx.compose.material.*

@Composable
fun CounterApp() {
    var count by rememberSaveable { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}        

• rememberSaveable automatically saves the count variable and restores it after configuration changes.
• For simple data types (e.g., Int, String), this works out of the box.

4. Handling Complex Data Types

For custom or complex data types, Compose allows you to define how the data should be saved and restored using a custom Saver.

Example: Custom Object with Saver

import androidx.compose.runtime.saveable.Saver
import androidx.compose.runtime.saveable.rememberSaveable

data class User(val name: String, val age: Int)

@Composable
fun UserProfile() {
    val userSaver = Saver<User, String>(
        save = { "${it.name},${it.age}" },
        restore = { val parts = it.split(","); User(parts[0], parts[1].toInt()) }
    )

    var user by rememberSaveable(saver = userSaver) {
        mutableStateOf(User("Alice", 25))
    }

    Text("Name: ${user.name}, Age: ${user.age}")
}        

• save: Converts the object to a serializable form (e.g., a string).
• restore: Reconstructs the object from the serialized data.

5. State Restoration Beyond UI

ViewModels with Compose

For more complex apps, consider using ViewModels in combination with Compose. The ViewModel retains state across configuration changes and process death.

@Composable
fun CounterWithViewModel(counterViewModel: CounterViewModel = viewModel()) {
    val count by counterViewModel.counter.observeAsState(0)

    Button(onClick = { counterViewModel.increment() }) {
        Text("Count: $count")
    }
}        

In this example:

• ViewModel handles state restoration and lifecycle awareness.
• Compose observes state changes seamlessly.

6. State Restoration for Navigation

Compose Navigation also supports state restoration natively. For example, when navigating between screens, each destination retains its state by default.

navController.navigate("profile") {
    restoreState = true // Ensures the profile screen restores its previous state
}        

If needed, you can customize state restoration for specific navigation flows.

7. Best Practices for State Restoration

• Use rememberSaveable for UI-specific state: Keep the logic simple by saving lightweight, UI-related data.
• Leverage ViewModels for business logic: Store critical data in ViewModels to handle process death gracefully.
• Test Restoration Scenarios: Simulate configuration changes, process death, and multitasking to ensure your app behaves as expected.
• Avoid Redundant Saving: Don't save large or easily re-creatable data; instead, focus on user-generated content or critical states.

8. Common Use Cases

• Form Inputs: Retain entered data during rotations.
• Multi-Step Workflows: Save progress in wizards or checkout flows.
• Dynamic Lists: Preserve scroll positions or selected items in lists.

9. Conclusion

State restoration is essential for delivering a smooth, user-friendly experience in Android apps. Jetpack Compose simplifies this process through rememberSaveable, Savers, and its seamless integration with ViewModels and Navigation.

By mastering these tools, you can build resilient and responsive UIs that retain state even in complex scenarios.