Recomposition concept in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a Compose state variable that triggers recomposition when changed.

Android Kotlin

var count by remember { mutableStateOf([1]) }

Drag options to blanks, or click blank then click option'

Afalse

B"count"

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string or null as initial state causes type errors.

The initial value of the state variable count should be 0 to track a number. This triggers recomposition when count changes.

2fill in blank

medium

Complete the code to update the state variable and trigger recomposition on button click.

Android Kotlin

Button(onClick = { count [1] 1 }) { Text("Increment") }

Drag options to blanks, or click blank then click option'

A+=

B*=

C-=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication changes the value incorrectly.

Using += increases the count by 1, triggering recomposition to update the UI.

3fill in blank

hard

Fix the error in the code to properly observe state changes and trigger recomposition.

Android Kotlin

val count = mutableStateOf([1])
Text(text = count.value.toString())

Drag options to blanks, or click blank then click option'

A"0"

Bfalse

C0

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string "0" causes type mismatch and recomposition issues.

The initial value must be an integer 0, not a string, to match the expected type and allow recomposition.

4fill in blank

hard

Fill both blanks to create a composable function that remembers a state and updates it on button click.

Android Kotlin

var text by remember { mutableStateOf([1]) }
Button(onClick = { text = [2] }) { Text("Change Text") }

Drag options to blanks, or click blank then click option'

A"Hello"

B"World"

C"Hello World"

D"Click"

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted words causes syntax errors.

The state text starts as "Hello" and changes to "World" when the button is clicked, causing recomposition.

5fill in blank

hard

Fill all three blanks to create a stateful composable that toggles a boolean and shows text accordingly.

Android Kotlin

var isOn by remember { mutableStateOf([1]) }
Button(onClick = { isOn = ![2] }) {
  Text(if (isOn) [3] else "Off")
}

Drag options to blanks, or click blank then click option'

Atrue

BisOn

C"On"

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using true as initial state or wrong variable name in toggle.

The state isOn starts as false. Clicking toggles it by negating isOn. The text shows "On" when true, else "Off".

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