Side effects (LaunchedEffect, SideEffect) in Android Kotlin - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a side effect in Jetpack Compose?

A side effect is an operation that affects something outside the scope of a composable function, like launching a coroutine, updating a variable, or interacting with the system.

beginner

What does LaunchedEffect do in Jetpack Compose?

LaunchedEffect runs a suspend function when the key(s) change or when the composable enters the composition. It is used to launch coroutines tied to the composable lifecycle.

intermediate

How does SideEffect differ from LaunchedEffect?

SideEffect runs synchronously after every successful recomposition to perform non-suspending side effects, while LaunchedEffect launches coroutines asynchronously.

beginner

When should you use LaunchedEffect in your composable?

Use LaunchedEffect when you want to run suspend functions or launch coroutines that depend on some state or key and should be cancelled and restarted when that key changes.

intermediate

Give an example of a side effect that SideEffect is suitable for.

SideEffect is suitable for updating external objects like logging, analytics, or updating a mutable state outside Compose after recomposition.

What happens when the key passed to LaunchedEffect changes?

A The composable is removed from the UI.

B Nothing, it runs only once.

C The coroutine inside <code>LaunchedEffect</code> restarts.

D The app crashes.

LaunchedEffect cancels the previous coroutine and launches a new one when the key changes.

Which of these is NOT true about SideEffect?

A It can run suspend functions.

B It is used for non-suspending side effects.

C It runs after every recomposition.

D It runs synchronously.

SideEffect cannot run suspend functions; it runs synchronously after recomposition.

Which Jetpack Compose API would you use to launch a coroutine tied to a composable's lifecycle?

A DisposableEffect

B remember

C SideEffect

D LaunchedEffect

LaunchedEffect launches coroutines that are cancelled when the composable leaves the composition.

If you want to log a message every time a composable recomposes, which API is best?

A LaunchedEffect

B SideEffect

C remember

D produceState

SideEffect runs after every recomposition, perfect for logging.

What is a key benefit of using LaunchedEffect over launching coroutines manually inside composables?

A It automatically cancels coroutines when composable leaves composition.

B It runs on the main thread only.

C It prevents recomposition.

D It disables side effects.

LaunchedEffect ties coroutine lifecycle to the composable lifecycle, cancelling coroutines when no longer needed.

Explain the difference between LaunchedEffect and SideEffect in Jetpack Compose.

Think about when and how each runs and what kind of side effects they handle.

Describe a scenario where you would use LaunchedEffect in a composable function.

Consider asynchronous tasks that depend on UI state.

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