Side effects (LaunchedEffect, SideEffect) in Android Kotlin - Deep Dive

Overview - Side effects (LaunchedEffect, SideEffect)

What is it?

Side effects in Android Jetpack Compose are actions that happen outside the normal UI rendering flow. They let your app do things like start a timer, fetch data, or show a message when the UI appears or changes. LaunchedEffect and SideEffect are tools to run these actions safely and at the right time. They help keep your UI code clean and predictable.

Why it matters

Without side effect management, your app might run actions too many times or at the wrong moment, causing bugs or wasted resources. Imagine your app fetching data repeatedly or showing multiple pop-ups by mistake. Side effects help control when and how these actions run, making your app smoother and more reliable.

Where it fits

Before learning side effects, you should understand basic Compose UI and state management. After mastering side effects, you can explore more advanced topics like state hoisting, effect handlers, and asynchronous data flows in Compose.

Mental Model

Core Idea

Side effects are controlled actions triggered by UI changes but run outside the UI drawing process to keep apps responsive and correct.

Think of it like...

Think of your UI as a stage play script that only describes scenes and actors. Side effects are like stagehands who quietly set up props or change lighting behind the scenes without interrupting the actors' performance.

┌───────────────┐
│   Compose UI  │
│  (Draws UI)   │
└──────┬────────┘
       │ triggers
       ▼
┌───────────────┐
│ Side Effects  │
│ (LaunchedEffect│
│  SideEffect)  │
└───────────────┘
       │ runs
       ▼
┌───────────────┐
│ External Work │
│ (Network, DB, │
│  Timers, etc) │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What are Side Effects in Compose

Concept: Introduce the idea that some actions happen outside UI drawing and need special handling.

In Jetpack Compose, UI is described by functions that run many times to draw the screen. But some actions, like starting a timer or loading data, should not run every time the UI redraws. These are called side effects. They happen outside the normal UI rendering to avoid repeating or breaking the UI.

Result

You understand that side effects are actions triggered by UI but run separately to keep UI stable.

Understanding that UI drawing and side effects are separate helps prevent bugs caused by repeating actions during recomposition.

2

Foundation

Why Side Effects Need Special Handling

Concept: Explain why running side effects directly in UI code causes problems.

If you put code like starting a timer or fetching data directly inside a composable function, it runs every time the UI redraws. This can cause multiple timers or repeated network calls, slowing the app or causing errors. Compose provides special tools to run side effects only when needed.

Result

You see why side effects must be controlled to avoid repeated or unwanted actions.

Knowing the problem side effects solve helps you appreciate the tools Compose offers to manage them.

3

Intermediate

Using LaunchedEffect for Coroutine Side Effects

🤔Before reading on: do you think LaunchedEffect runs its block every time the UI redraws or only when keys change? Commit to your answer.

Concept: Learn how LaunchedEffect runs suspend functions safely when certain data changes.

LaunchedEffect takes one or more keys and runs its coroutine block when the keys change or when the composable first appears. It cancels and restarts if keys change. This is perfect for tasks like fetching data or animations that need to start once or when inputs change. Example: LaunchedEffect(userId) { val data = fetchUserData(userId) // update state with data }

Result

You can run asynchronous tasks tied to UI state changes without repeating unnecessarily.

Understanding LaunchedEffect's key-based control prevents repeated side effects and keeps UI and data in sync.

4

Intermediate

Using SideEffect for Synchronous Effects

🤔Before reading on: does SideEffect run before or after Compose commits changes to the UI? Commit to your answer.

Concept: SideEffect runs code after Compose applies UI changes, useful for quick synchronous actions like logging or updating external state.

SideEffect runs its block every time the composable commits changes to the UI. It is synchronous and runs on the main thread. Use it for small side effects that must happen after UI updates, like sending analytics or updating a ViewModel. Example: SideEffect { println("UI updated") }

Result

You can run quick, synchronous side effects tied to UI updates safely.

Knowing when SideEffect runs helps you choose it for lightweight tasks that must follow UI changes.

5

Intermediate

Difference Between LaunchedEffect and SideEffect

🤔Before reading on: do you think LaunchedEffect can run blocking code? Commit to your answer.

Concept: Clarify the different use cases and behaviors of LaunchedEffect and SideEffect.

LaunchedEffect runs suspend functions inside a coroutine and can do long-running or asynchronous work. SideEffect runs immediately after UI commit and must be quick and non-blocking. LaunchedEffect cancels and restarts when keys change; SideEffect runs every commit. Use LaunchedEffect for async tasks, SideEffect for quick sync updates.

Result

You can pick the right side effect tool for your task based on timing and workload.

Understanding these differences prevents misuse that can cause UI lag or repeated work.

6

Advanced

Managing Side Effects with Keys and Lifecycle

🤔Before reading on: do you think LaunchedEffect cancels its coroutine when the composable leaves the screen? Commit to your answer.

Concept: Learn how keys control side effect lifecycle and how Compose cancels coroutines when composables disappear.

LaunchedEffect uses keys to decide when to restart its coroutine. If keys change, the old coroutine cancels and a new one starts. When the composable leaves the composition, the coroutine cancels automatically. This prevents leaks and wasted work. Example: LaunchedEffect(userId) { // fetch data for userId } If userId changes, old fetch cancels, new starts.

Result

You can write side effects that respond to data changes and clean up automatically.

Knowing how Compose manages coroutine lifecycles helps avoid memory leaks and stale data.

7

Expert

Unexpected Behaviors and Best Practices

🤔Before reading on: can SideEffect cause infinite recompositions if it updates state? Commit to your answer.

Concept: Explore tricky cases where side effects cause bugs and how to avoid them.

If SideEffect updates Compose state, it can trigger recomposition, causing SideEffect to run again, creating a loop. LaunchedEffect coroutines can also restart unexpectedly if keys are unstable. Best practice: avoid state changes inside SideEffect; use LaunchedEffect for state updates. Use stable keys to prevent unwanted restarts. Example of bad SideEffect: SideEffect { count++ // triggers recomposition } Better: LaunchedEffect(key) { count++ }

Result

You avoid infinite loops and unstable UI by following best practices.

Understanding side effect pitfalls helps write robust, performant Compose apps.

Under the Hood

Compose separates UI description from side effects. When Compose recomposes, it runs composable functions to produce UI. Side effects run in special effect handlers outside the UI thread's drawing pass. LaunchedEffect launches coroutines tied to composition lifecycle, cancelling them when keys change or composable leaves. SideEffect runs synchronously after UI commit on the main thread. This separation ensures UI stays fast and side effects run safely.

Why designed this way?

Compose was designed for declarative UI where UI functions can run many times. Running side effects directly would cause repeated or out-of-control actions. The effect APIs provide controlled, lifecycle-aware ways to run side effects, preventing bugs and resource waste. Alternatives like manual lifecycle management were error-prone and verbose.

┌───────────────┐
│ Composable UI │
│ Functions run │
└──────┬────────┘
       │ triggers
       ▼
┌───────────────┐
│ Effect Handlers│
│ ┌───────────┐ │
│ │LaunchedEff│ │
│ │ect        │ │
│ └───────────┘ │
│ ┌───────────┐ │
│ │SideEffect │ │
│ └───────────┘ │
└──────┬────────┘
       │ run
       ▼
┌───────────────┐
│ Coroutine     │
│ Lifecycle     │
│ Management    │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does SideEffect run only once or every time the UI updates? Commit to your answer.

Common Belief: SideEffect runs only once when the composable appears.

Reality: SideEffect runs every time the composable commits changes to the UI, not just once.

Why it matters: Thinking it runs once can cause repeated side effects and performance issues.

Quick: Can LaunchedEffect run blocking code safely? Commit to your answer.

Common Belief: LaunchedEffect can run any code, blocking or not.

Reality: LaunchedEffect runs suspend functions inside coroutines and should not block the main thread.

Why it matters: Blocking code inside LaunchedEffect can freeze the UI and cause bad user experience.

Quick: If SideEffect updates Compose state, will it cause infinite recompositions? Commit to your answer.

Common Belief: Updating state inside SideEffect is safe and won't cause loops.

Reality: Updating state inside SideEffect triggers recomposition, causing SideEffect to run again, creating an infinite loop.

Why it matters: This can crash or freeze the app, a common beginner pitfall.

Quick: Does LaunchedEffect restart its coroutine if keys don't change? Commit to your answer.

Common Belief: LaunchedEffect always restarts its coroutine on every recomposition.

Reality: LaunchedEffect only restarts when its keys change or when first entering composition.

Why it matters: Misunderstanding this leads to unnecessary work or missed updates.

Expert Zone

1

LaunchedEffect coroutines run in a composition-aware scope that cancels automatically, preventing leaks without manual cleanup.

2

SideEffect runs after every successful commit, so it can be used to synchronize external state with UI but must avoid triggering recompositions.

3

Using stable keys in LaunchedEffect is critical; unstable keys cause frequent restarts and performance issues.

When NOT to use

Avoid using SideEffect or LaunchedEffect for heavy or blocking work; instead, use ViewModel scopes or external coroutine scopes. For one-time initialization, consider rememberCoroutineScope or rememberUpdatedState to manage side effects more precisely.

Production Patterns

In real apps, LaunchedEffect is used for data loading when parameters change, animations, or event handling. SideEffect is used for logging, analytics, or syncing UI state with external systems. Developers combine these with state hoisting and ViewModel to keep UI reactive and side effects controlled.

Connections

Reactive Programming

Side effects in Compose are similar to managing effects in reactive streams where actions happen in response to data changes.

Understanding side effects in Compose helps grasp reactive patterns where data flows trigger controlled external actions.

Functional Programming

Compose separates pure UI functions from side effects, reflecting the functional programming principle of pure functions and controlled effects.

Knowing this connection clarifies why side effects must be isolated and managed carefully in Compose.

Theatre Production

Like stagehands managing props behind the scenes, side effects manage external actions without disrupting the main performance (UI).

This cross-domain view highlights the importance of separating visible UI from hidden work.

Common Pitfalls

#1 Triggering infinite recompositions by updating state inside SideEffect.

Wrong approach:

SideEffect {
count++ // updates state causing recomposition
}

Correct approach:

LaunchedEffect(key) {
count++ // safe async state update
}

Root cause:

SideEffect runs after every commit; updating state inside it causes recomposition, which reruns SideEffect endlessly.

#2 Running blocking code inside LaunchedEffect causing UI freeze.

Wrong approach:

LaunchedEffect(Unit) {
Thread.sleep(1000) // blocks main thread
}

Correct approach:

LaunchedEffect(Unit) {
delay(1000) // suspends coroutine without blocking
}

Root cause:

LaunchedEffect runs in coroutine scope; blocking main thread inside it freezes UI.

#3 Using unstable keys causing LaunchedEffect to restart too often.

Wrong approach:

LaunchedEffect(System.currentTimeMillis()) {
// runs every recomposition
}

Correct approach:

LaunchedEffect(userId) {
// runs only when userId changes
}

Root cause:

Keys must be stable and meaningful; unstable keys cause unnecessary restarts.

Key Takeaways

Side effects in Compose are actions that run outside UI drawing to keep apps efficient and correct.

LaunchedEffect runs suspend functions tied to keys and lifecycle, perfect for async tasks.

SideEffect runs quick synchronous code after UI commits, useful for small updates or logging.

Misusing side effects can cause infinite loops, UI freezes, or repeated work, so choose and use them carefully.

Understanding side effects connects Compose to broader programming ideas like reactive and functional programming.