remember and mutableStateOf in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you use mutableStateOf without remember?

Consider this Compose code snippet:

var count by mutableStateOf(0)
Button(onClick = { count++ }) {
  Text("Count: $count")
}

What will happen when you click the button multiple times?

Android Kotlin

var count by mutableStateOf(0)
Button(onClick = { count++ }) {
  Text("Count: $count")
}

A The count will reset to 0 on every recomposition, so UI never shows increment.

B The count will increase but UI will not update to show changes.

C The count will increase and UI updates correctly on each click.

D The app will crash with an exception about state management.

💡 Hint

Think about what happens to variables declared outside remember during recomposition.

Without remember, mutableStateOf is re-initialized on every recomposition, resetting count to 0 each time. So the UI never shows increments.

📝 Syntax

intermediate

Identify the correct syntax to declare a mutable state variable with remember

Which of the following Kotlin Compose code snippets correctly declares a mutable state variable named "text" initialized to an empty string using remember and mutableStateOf?

A val text by mutableStateOf("")

B val text = remember { mutableStateOf("") }

C var text = mutableStateOf("") remember

D var text by remember { mutableStateOf("") }

💡 Hint

Remember that remember is a function that takes a lambda returning mutableStateOf.

Option D uses 'by' delegation with remember { mutableStateOf("") }, which is the correct pattern to declare a mutable state variable in Compose.

❓ lifecycle

advanced

How does remember behave across recompositions?

In Jetpack Compose, what is the behavior of a variable declared with remember when the composable function recomposes?

A The variable is reset only when the app process is killed.

B The variable is re-initialized every time the composable recomposes.

C The variable keeps its value across recompositions until the composable leaves the composition.

D The variable is shared globally across all composables.

💡 Hint

Think about how remember helps keep state during recomposition but not beyond the composable lifecycle.

remember stores the value in the composition and keeps it across recompositions, but resets when the composable leaves the composition.

🔧 Debug

advanced

Why does this Compose UI not update when state changes?

Given this code:

@Composable
fun Counter() {
  var count = remember { 0 }
  Button(onClick = { count++ }) {
    Text("Count: $count")
  }
}

Why does the UI not update when the button is clicked?

Android Kotlin

@Composable
fun Counter() {
  var count = remember { 0 }
  Button(onClick = { count++ }) {
    Text("Count: $count")
  }
}

A Because count is not a mutable state, so Compose does not track changes to it.

B Because remember cannot be used with integers.

C Because count should be declared as val, not var.

D Because Button onClick cannot modify variables.

💡 Hint

Check if the variable is wrapped in mutableStateOf to notify Compose of changes.

The variable count is just an integer remembered, but not a mutable state. Compose does not recompose when it changes.

🧠 Conceptual

expert

What is the main difference between remember and mutableStateOf in Jetpack Compose?

Choose the best explanation of the difference between remember and mutableStateOf:

A remember triggers recomposition on value change; mutableStateOf stores a value across recompositions.

B remember stores a value across recompositions; mutableStateOf creates a state holder that triggers recomposition on value change.

C Both remember and mutableStateOf do the same thing and can be used interchangeably.

D mutableStateOf is used only for immutable values; remember is for mutable values.

💡 Hint

Think about what each function does in terms of state storage and recomposition triggers.

remember keeps a value alive during recompositions; mutableStateOf creates a state object that notifies Compose to recompose when changed.

Practice

1. What is the main purpose of remember in Jetpack Compose?

easy

A. To keep a value during recompositions so it doesn't reset

B. To create a mutable state that updates the UI

C. To launch a coroutine for background tasks

D. To define a new composable function

Solution

1. Step 1: Understand what recomposition means

   Recomposition happens when the UI redraws, and values can reset unless preserved.

2. Step 2: Identify the role of remember

   remember keeps a value alive during recompositions to avoid resetting.

3. Final Answer:

   To keep a value during recompositions so it doesn't reset -> Option A

4. Quick Check:

   remember = keeps value during redraws [OK]

Hint: remember keeps values stable across UI redraws [OK]

Common Mistakes:

• Confusing remember with mutableStateOf
• Thinking remember creates mutable state
• Assuming remember launches background tasks

2. Which of the following is the correct syntax to create a mutable state variable named count initialized to 0 using remember and mutableStateOf?

easy

A. val count = remember { mutableStateOf(0) }

B. var count = mutableStateOf(remember(0))

C. val count = mutableStateOf(remember { 0 })

D. var count = remember.mutableStateOf(0)

Solution

1. Step 1: Recall the correct order of functions

   remember wraps mutableStateOf to keep state across recompositions.

2. Step 2: Check syntax correctness

   val count = remember { mutableStateOf(0) } correctly uses val count = remember { mutableStateOf(0) }. Others misuse function calls or syntax.

3. Final Answer:

   val count = remember { mutableStateOf(0) } -> Option A

4. Quick Check:

   remember wraps mutableStateOf syntax [OK]

Hint: remember { mutableStateOf(value) } is the correct pattern [OK]

Common Mistakes:

• Swapping order of remember and mutableStateOf
• Using var instead of val incorrectly
• Calling remember or mutableStateOf as properties

3. Given the code snippet:

var count = remember { mutableStateOf(0) }
count.value += 1
println(count.value)

What will be printed after this code runs once?

medium

A. 0

B. Compilation error

C. null

D. 1

Solution

1. Step 1: Understand initial value of count

   count is a mutable state holding 0 initially.

2. Step 2: Increment the value and print

   count.value += 1 increases value to 1, so printing count.value outputs 1.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   mutableStateOf value increments correctly [OK]

Hint: mutableStateOf value accessed with .value [OK]

Common Mistakes:

• Printing count instead of count.value
• Forgetting to use .value to access state
• Assuming count is a simple Int

4. What is wrong with this code snippet?

var count = mutableStateOf(0)
count = remember { mutableStateOf(1) }

medium

A. Cannot assign remember result to a var

B. Using var instead of val for state causes errors

C. Remember must be called inside a composable function

D. mutableStateOf cannot be reassigned

Solution

1. Step 1: Identify where remember can be used

   remember can only be called inside a composable function context.

2. Step 2: Analyze the snippet context

   The snippet shows remember called outside composable, which is invalid.

3. Final Answer:

   Remember must be called inside a composable function -> Option C

4. Quick Check:

   remember requires composable context [OK]

Hint: remember only works inside @Composable functions [OK]

Common Mistakes:

• Calling remember outside composable functions
• Confusing var and val usage
• Thinking mutableStateOf cannot be reassigned

5. You want to create a counter button that increments a number each time it is clicked and keeps the count even if the screen recomposes. Which code snippet correctly implements this behavior?

hard

A. @Composable
fun Counter() {
val count = mutableStateOf(0)
Button(onClick = { count.value++ }) {
Text("Count: ${count.value}")
}
}

B. @Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}
}

C. @Composable
fun Counter() {
var count = 0
Button(onClick = { count++ }) {
Text("Count: $count")
}
}

D. @Composable
fun Counter() {
val count = remember { 0 }
Button(onClick = { count++ }) {
Text("Count: $count")
}
}

Solution

1. Step 1: Ensure state is remembered and mutable

   Using remember { mutableStateOf(0) } with var count by delegates state correctly.

2. Step 2: Check button click updates state and UI

   Incrementing count++ updates state and triggers UI recomposition.

3. Step 3: Analyze other options

   @Composable fun Counter() { val count = mutableStateOf(0) Button(onClick = { count.value++ }) { Text("Count: ${count.value}") } } lacks remember, so state resets on recomposition. @Composable fun Counter() { var count = 0 Button(onClick = { count++ }) { Text("Count: $count") } } uses simple var without state, so UI won't update. @Composable fun Counter() { val count = remember { 0 } Button(onClick = { count++ }) { Text("Count: $count") } } remembers an Int, not mutable state, so increment fails.

4. Final Answer:

   @Composable fun Counter() { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Count: $count") } } -> Option B

5. Quick Check:

   remember + mutableStateOf + var by delegate = correct counter [OK]

Hint: Use remember { mutableStateOf() } with var by for stateful UI [OK]

Common Mistakes:

• Not using remember causes state reset on recomposition
• Using simple var without state prevents UI updates
• Forgetting to use mutableStateOf for mutable state