Recomposition concept in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What triggers recomposition in Jetpack Compose?

In Jetpack Compose, which of the following changes will cause a composable function to recompose?

A Changing a local variable inside the composable without State

B Changing a variable declared outside the composable but not observed

C Modifying a parameter passed as a constant value

D A change in a State variable used inside the composable

💡 Hint

Think about what Compose observes to know when to update the UI.

Compose tracks State variables used inside composables. When a State changes, Compose triggers recomposition to update the UI. Local variables or constants do not trigger recomposition.

❓ lifecycle

intermediate

How does recomposition affect performance?

Which statement best describes how recomposition impacts app performance in Jetpack Compose?

A Recomposition always recreates the entire UI tree, causing slow performance

B Recomposition freezes the UI until all composables finish rendering

C Recomposition only updates the parts of the UI that depend on changed State, improving efficiency

D Recomposition disables user input during the update process

💡 Hint

Think about how Compose optimizes UI updates.

Compose recomposes only the composables affected by State changes, avoiding full UI redraws and improving performance.

🔧 Debug

advanced

Why does this composable not recompose when State changes?

Consider this code snippet: @Composable fun Greeting(name: String) { Text(text = "Hello, $name!") } val userName = mutableStateOf("Alice") // In UI Greeting(name = userName.value) Why might the UI not update when userName.value changes?

A Because Greeting is not marked with @Composable

B Because userName is not passed as a State object, only its value is passed

C Because mutableStateOf does not trigger recomposition

D Because Text composable does not update on parameter changes

💡 Hint

Think about how Compose tracks State changes through parameters.

Passing only the value of a State variable does not let Compose track changes. The composable must receive a State or be called with a value that changes to trigger recomposition.

🧠 Conceptual

advanced

What is the role of remember in recomposition?

In Jetpack Compose, what does the remember function do during recomposition?

A It stores a value across recompositions to avoid resetting it

B It forces recomposition to happen immediately

C It disables recomposition for the composable

D It clears all State variables when recomposition occurs

💡 Hint

Think about how to keep values stable during UI updates.

remember keeps a value in memory across recompositions so it is not recreated each time the composable runs.

❓ navigation

expert

How does recomposition interact with navigation state?

In a Jetpack Compose app using Navigation Compose, what happens to composables when navigating between screens regarding recomposition?

A Composables of the previous screen are disposed and do not recompose when navigating away

B All composables in the app recompose on every navigation event

C Navigation Compose disables recomposition to improve speed

D Composables keep their State but never recompose after navigation

💡 Hint

Consider the lifecycle of composables in navigation stacks.

When navigating away, the previous screen's composables are removed from the composition and do not recompose until navigated back.

Practice

1. What does recomposition mean in Jetpack Compose?

easy

A. The app restarts when the user rotates the screen

B. The UI updates automatically when data changes

C. The app saves data to the database

D. The UI is drawn only once at app launch

Solution

1. Step 1: Understand recomposition meaning

   Recomposition means the UI redraws when the data it depends on changes.

2. Step 2: Compare options with definition

   Only The UI updates automatically when data changes describes this automatic UI update behavior.

3. Final Answer:

   The UI updates automatically when data changes -> Option B

4. Quick Check:

   Recomposition = UI updates on data change [OK]

Hint: Recomposition means UI changes with data changes [OK]

Common Mistakes:

• Confusing recomposition with app restart
• Thinking recomposition saves data
• Believing UI draws only once

2. Which of the following is the correct way to declare a state variable in Jetpack Compose to trigger recomposition?

easy

A. var count = 0

B. val count = 0

C. var count = mutableListOf(0)

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

Solution

1. Step 1: Identify state declaration for recomposition

   In Compose, state variables use remember { mutableStateOf() } to trigger recomposition.

2. Step 2: Check options for correct syntax

   Only val count = remember { mutableStateOf(0) } uses remember { mutableStateOf(0) } correctly.

3. Final Answer:

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

4. Quick Check:

   State variable uses remember + mutableStateOf [OK]

Hint: Use remember { mutableStateOf() } for state [OK]

Common Mistakes:

• Using plain variables without remember
• Using val without state wrapper
• Using mutableList instead of mutableStateOf

3. Given this code snippet, what will be displayed when the button is clicked once?

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

medium

A. Clicked: 0

B. Clicked: null

C. Clicked: 1

D. Clicked: 2

Solution

1. Step 1: Understand initial state and click effect

   Initial count is 0. Clicking the button increments count by 1.

2. Step 2: Determine displayed text after one click

   After one click, count becomes 1, so text shows "Clicked: 1".

3. Final Answer:

   Clicked: 1 -> Option C

4. Quick Check:

   State increments on click, text updates [OK]

Hint: Count starts 0, increments by 1 on click [OK]

Common Mistakes:

• Thinking count stays 0 after click
• Assuming count increments twice
• Confusing null with zero

4. What is wrong with this code that prevents recomposition when the button is clicked?

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

medium

A. count is not a state variable, so UI won't update

B. Button onClick syntax is incorrect

C. Text composable cannot display variables

D. count should be a val, not var

Solution

1. Step 1: Identify state usage in code

   Variable count is a plain var, not wrapped in state, so Compose won't track changes.

2. Step 2: Understand recomposition trigger

   Without state, UI does not recompose on count change, so text stays the same.

3. Final Answer:

   count is not a state variable, so UI won't update -> Option A

4. Quick Check:

   State needed for recomposition [OK]

Hint: Use state variables to trigger UI updates [OK]

Common Mistakes:

• Thinking var alone triggers recomposition
• Believing onClick syntax is wrong
• Assuming Text can't show variables

5. You want to create a counter that resets to zero when it reaches 5, updating the UI automatically. Which code snippet correctly uses recomposition to achieve this?

@Composable
fun Counter() {
  var count by remember { mutableStateOf(0) }
  Button(onClick = {
    count = if (count == 5) 0 else count + 1
  }) {
    Text("Count: $count")
  }
}

hard

A. Correct: count resets at 5 and UI updates

B. Incorrect: count never resets to zero

C. Incorrect: count is not a state variable

D. Incorrect: Button onClick syntax is invalid

Solution

1. Step 1: Analyze state and logic in code

   Variable count is a state variable with remember and mutableStateOf, so UI updates on change.

2. Step 2: Check reset logic correctness

   When count reaches 5, it resets to 0; otherwise, it increments by 1. This logic is correct.

3. Final Answer:

   Correct: count resets at 5 and UI updates -> Option A

4. Quick Check:

   State + reset logic triggers recomposition [OK]

Hint: Use state and conditional update for reset [OK]

Common Mistakes:

• Not using state variable for count
• Missing reset condition
• Incorrect Button onClick syntax