Side effects (LaunchedEffect, SideEffect) in Android Kotlin - UI Render Trace

Component - Side effects (LaunchedEffect, SideEffect)

This UI component demonstrates how to run side effects in Jetpack Compose using LaunchedEffect and SideEffect. Side effects are actions that happen outside the normal UI rendering, like showing a message or logging.

Widget Tree

Column
├── Text ("Counter: X")
├── Button ("Increment")
└── Text ("SideEffect Log")

The root is a vertical Column layout. It contains a Text showing the current counter value, a Button to increase the counter, and another Text showing a log message updated by side effects.

Render Trace - 6 Steps

Step 1: Column

Step 2: Text

Step 3: Button

Step 4: Text

Step 5: LaunchedEffect

Step 6: SideEffect

State Change - Re-render

Trigger:User taps the 'Increment' button

Before

counter = 0, log = 'None'

→

After

counter = 1, log = 'Updated by SideEffect: 1' then 'Updated by LaunchedEffect: 1' after delay

Re-renders:Entire Column recomposes because counter state changed, updating Text widgets and triggering side effects

UI Quiz - 3 Questions

What happens when the 'Increment' button is pressed?

A The app crashes because of side effects

B Only the counter text updates, log stays the same

C Counter increases and side effects update the log text

D Nothing changes on screen

Key Insight

In Jetpack Compose, side effects let you run code that interacts with the outside world or performs asynchronous work without blocking UI rendering. LaunchedEffect runs suspend functions tied to state changes, while SideEffect runs after every UI update. This helps keep UI code clean and reactive.