Side effects (LaunchedEffect, SideEffect) in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to launch a side effect when the composable enters the composition.

Android Kotlin

LaunchedEffect([1]) {
    // Your suspend function here
}

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

Afalse

Btrue

CUnit

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or false as keys which might cause unexpected restarts.

Using null which is not allowed as a key.

LaunchedEffect requires a key to control when it runs. Using Unit means it runs once when the composable enters composition.

2fill in blank

medium

Complete the code to run a side effect every time the count value changes.

Android Kotlin

LaunchedEffect([1]) {
    println("Count changed: $count")
}

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

Acount

Btrue

CUnit

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or Unit which do not depend on count.

Using null which is invalid.

Passing count as the key makes the effect run every time count changes.

3fill in blank

hard

Fix the error in the code to correctly run a side effect that updates the UI after composition.

Android Kotlin

SideEffect {
    [1] = true
}

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

Aval isLoading

BisLoading

Cvar isLoading

Dfun isLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to declare variables inside SideEffect block.

Using val or fun keywords inside the block.

You should assign to an existing mutable state variable like isLoading. Declaring it inside SideEffect is incorrect.

4fill in blank

hard

Fill both blanks to create a side effect that runs only once and updates a flag.

Android Kotlin

LaunchedEffect([1]) {
    [2] = true
}

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

AUnit

Bfalse

CisInitialized

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or false as keys causing repeated runs.

Assigning to a wrong or undeclared variable.

Using Unit as key runs the effect once. Assigning true to isInitialized updates the flag.

5fill in blank

hard

Fill all three blanks to create a side effect that updates a message when userName changes.

Android Kotlin

LaunchedEffect([1]) {
    message = "Hello, " + [2] + [3]
}

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

AuserName

B"!"

D"?"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keys causing the effect not to run on userName change.

Using a question mark instead of an exclamation mark.

The effect runs when userName changes. The message concatenates userName and an exclamation mark.

Practice

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

easy

A. To run suspend functions when a key changes

B. To immediately update UI elements

C. To create a new composable function

D. To handle user input events

Solution

1. Step 1: Understand LaunchedEffect role

   LaunchedEffect is designed to run suspend functions in response to changes in keys.

2. Step 2: Differentiate from UI updates

   It does not directly update UI or handle input but manages side effects like network calls.

3. Final Answer:

   To run suspend functions when a key changes -> Option A

4. Quick Check:

   LaunchedEffect runs suspend code on key change = D [OK]

Hint: LaunchedEffect runs suspend code on key changes [OK]

Common Mistakes:

• Confusing LaunchedEffect with UI rendering
• Thinking it handles user input directly
• Assuming it runs only once without key

2. Which of the following is the correct syntax to use SideEffect in a composable?

easy

A. SideEffect.launch { /* suspend code */ }

B. SideEffect { /* code to run after every recomposition */ }

C. SideEffect() { /* code to run once */ }

D. SideEffect.runOnUiThread { /* UI update code */ }

Solution

1. Step 1: Recall SideEffect usage

   SideEffect is a composable function that takes a lambda to run after every successful recomposition.

2. Step 2: Check syntax correctness

   SideEffect { /* code to run after every recomposition */ } matches the correct syntax without parentheses or suspend keywords.

3. Final Answer:

   SideEffect { /* code to run after every recomposition */ } -> Option B

4. Quick Check:

   SideEffect uses lambda syntax without parentheses = C [OK]

Hint: SideEffect uses simple lambda syntax without parentheses [OK]

Common Mistakes:

• Adding parentheses after SideEffect
• Trying to launch suspend code inside SideEffect
• Using SideEffect as a coroutine builder

3. What will be the output behavior of this code snippet?

var count = 0
LaunchedEffect(Unit) {
  count += 1
}
SideEffect {
  println("Count: $count")
}

medium

A. Prints "Count: 0" repeatedly on every recomposition

B. Prints "Count: 1" repeatedly on every recomposition

C. Prints "Count: 1" once after first composition

D. Prints "Count: 0" once and never again

Solution

1. Step 1: Analyze LaunchedEffect behavior

   LaunchedEffect(Unit) runs once on first composition and increments count to 1.

2. Step 2: Analyze SideEffect behavior

   SideEffect runs after every recomposition and prints current count value. However, since count is a regular variable and not a state, recompositions do not trigger updates to count or cause recompositions to reflect the incremented value. The printed value remains 0 repeatedly.

3. Final Answer:

   Prints "Count: 0" repeatedly on every recomposition -> Option A

4. Quick Check:

   Regular variable not triggering recomposition; SideEffect prints initial value repeatedly = B [OK]

Hint: Regular variables don't trigger recomposition; SideEffect prints initial value repeatedly [OK]

Common Mistakes:

• Assuming SideEffect runs only once
• Thinking count increments on every recomposition
• Confusing LaunchedEffect and SideEffect timing

4. Identify the error in this code using LaunchedEffect:

@Composable
fun MyScreen() {
  LaunchedEffect {
    delay(1000)
    println("Hello")
  }
}

medium

A. Cannot call delay inside LaunchedEffect

B. LaunchedEffect must be called outside composable

C. println cannot be used inside composable

D. Missing key parameter in LaunchedEffect call

Solution

1. Step 1: Check LaunchedEffect syntax

   LaunchedEffect requires at least one key parameter to track changes and restart the coroutine.

2. Step 2: Confirm other parts are valid

   Calling delay and println inside LaunchedEffect is allowed; it runs suspend code.

3. Final Answer:

   Missing key parameter in LaunchedEffect call -> Option D

4. Quick Check:

   LaunchedEffect needs key parameter = B [OK]

Hint: LaunchedEffect always needs a key parameter [OK]

Common Mistakes:

• Omitting key parameter in LaunchedEffect
• Thinking delay is disallowed inside LaunchedEffect
• Believing println can't be used in composables

5. You want to fetch data from the network only once when a screen appears and log a message after every UI update. Which combination correctly uses LaunchedEffect and SideEffect?

hard

A. Use LaunchedEffect without key for fetching and SideEffect(Unit) for logging

B. Use SideEffect(Unit) for fetching and LaunchedEffect { println("UI updated") } for logging

C. Use LaunchedEffect(Unit) for fetching and SideEffect { println("UI updated") } for logging

D. Use SideEffect with key for fetching and LaunchedEffect(Unit) for logging

Solution

1. Step 1: Identify correct usage for fetching once

   LaunchedEffect with Unit key runs once on first composition, ideal for fetching data.

2. Step 2: Identify correct usage for logging after UI updates

   SideEffect runs after every recomposition, perfect for logging UI updates.

3. Final Answer:

   Use LaunchedEffect(Unit) for fetching and SideEffect { println("UI updated") } for logging -> Option C

4. Quick Check:

   LaunchedEffect for one-time suspend; SideEffect for every UI update = A [OK]

Hint: LaunchedEffect for one-time tasks; SideEffect for every UI update [OK]

Common Mistakes:

• Using SideEffect for suspend fetching
• Omitting key in LaunchedEffect
• Confusing which runs once vs every recomposition