Originally published on Medium:
https://medium.com/@supsabhi/jetpack-compose-remember-vs-remembersaveable-75ff37f8047e
What it is?When to Use? your beginner friendly guide
Imagine this: You’re filling out a login form on your Android app, typing your email and password carefully. Just as you’re about to hit submit, you accidentally rotate your phone. Poof! All your entered data disappears, and you have to start over. Frustrating, right?
This common scenario highlights one of the most crucial concepts in modern Android development with Jetpack Compose: state management.
When building Android apps with Jetpack Compose, managing state is one of the most important tasks you’ll encounter.
Whether you’re a beginner just starting your journey in Compose or an experienced developer looking to deepen your understanding, mastering remember() and rememberSaveable() is essential to make apps UI interactive and responsive to user actions. Keeping track of UI information — like user inputs, button clicks, or toggle switches — ensures your app behaves reliably and smoothly.
What is “State” in Simple Terms?
Think of state as your app’s memory.In UI programming, state is just information your app needs to “remember” to correctly show the screen. For example:
The current text in a search box.
How many times a button has been clicked.
Whether a switch is on or off.
In a counter app, the current number is the state.
In a shopping cart, the list of items and total price represent state.
When this information changes, the UI updates to reflect it. Jetpack Compose uses mutable state objects like mutableStateOf() to track these changes reactively.
In short it’s any data that can change over time and affects what users see on their screen.
Real-world analogy: State is like the current page number in a book you’re reading. As you progress through the book (interact with your app), the page number (state) changes, and this determines what content you see.
In traditional Android development with XML layouts, managing state was complex and error-prone. Jetpack Compose revolutionizes this by making UI a function of state. When state changes, the UI automatically updates to reflect those changes.
Recomposition is Compose’s way of updating the UI when state changes. Jetpack Compose UI functions can be called multiple times (this is called recomposition).Think of it as automatically redrawing parts of your screen when something changes. However, there’s a catch: during recomposition, local variables get reset to their initial values unless we use special state holders.
Without remember, every time your UI recomposes, your variable would reset to its initial state, losing any user input or interaction.
What is remember()?
remember() is a Compose function that stores a value in memory during composition and returns the same value across recompositions. It’s like giving your Composable function a short-term.It saves the state in a temporary bundle behind the scenes, so user input or important UI state remains even after an activity is recreated.
What is rememberSaveable()?
rememberSaveable() is like remember() with superpowers. It not only stores values across recompositions but also survives configuration changes like screen rotation, theme changes, and even process death in some cases. rememberSaveable uses Android’s SavedStateHandle behind the scenes, storing state in a bundle, so it can survive these changes automatically.
How It Differs from remember()
The key difference lies in persistence:
remember(): Survives recomposition only
rememberSaveable(): Survives recomposition + configuration changes
Use remember() when:
Temporary UI state: Button pressed states, animation values, scroll positions
Derived state: Calculated values that can be easily recomputed
Performance-critical scenarios: High-frequency updates where serialization overhead matters
Large objects: Complex objects that don’t need to survive configuration changes
Use rememberSaveable() when:
User input: Form fields, search queries, text input
Important user progress: Game scores, shopping cart contents
User preferences: Selected options, filter settings
Navigation state: Selected tabs, current page indices
Not managing state correctly can lead to frustrating UX, where your app forgets what the user was doing,your UI becomes essentially broken. Variables reset on every recomposition, and changes don’t trigger UI updates.
One of the common misconception: “My composable only runs once.” In reality, composables can recompose many times.
Always assume your composable function will be called multiple times. That’s why below best practices are very much important
State hoisting: Keep state at the lowest common parent
Single source of truth: Don’t duplicate state across composables
Immutable state: Use immutable data classes when possible
Avoid side effects in composition: Use LaunchedEffect or DisposableEffect
Test configuration changes: Always test your app by rotating the device
Pro tip: For large datasets, save only the essential identifier (like a selected ID) in rememberSaveable() and recreate the full object using remember().
Below is a Simple Example Showing the Difference
@Composable
fun WithoutRememberExample() {
var text = mutableStateOf("")
TextField(
value = text,
onValueChange = { text = it },
label = { Text("Type something") }
)
}
Here, every time Composable redraws (recomposes), text gets reset to empty, so any input is lost immediately — even when you type a character. The UI isn’t interactive at all because it never “remembers” what you typed.
@Composable
fun RememberExample() {
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it },
label = { Text("Type something") }
)
}
Here the typed text is remembered only when the UI updates.
But if you rotate the screen, text will reset to empty.
@Composable
fun RememberSaveableExample() {
var text by rememberSaveable { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it },
label = { Text("Type something") }
)
}
Here, text will still hold after device rotation or UI recreation.
Understanding the difference between remember() and rememberSaveable() is crucial for building robust, user-friendly Android applications.Remember, becoming proficient with Compose state management takes practice.Start with simple examples and you will reach there sooner.
👏 Found this helpful?
If this article helped you understand Jetpack Compose state management, please give it a clap and follow me for more Android development tutorials!
💬 Questions or suggestions? Drop a comment below — I read and respond to every one!
🔄 Share this article with fellow Android developers who might find it useful.
Happy coding! 🚀
Top comments (0)