Side effects (LaunchedEffect, SideEffect) in Android Kotlin - Mini App: Build & Ship

Build: Side Effects Demo

This screen demonstrates how to use LaunchedEffect and SideEffect in Jetpack Compose to handle side effects like showing a message and logging.

Target UI

┌─────────────────────────────┐
│ Side Effects Demo            │
├─────────────────────────────┤
│ [Show Welcome Message]      │
│                             │
│ Log:                       │
│                             │
│                             │
└─────────────────────────────┘

Add a button labeled 'Show Welcome Message'.

When the button is clicked, use LaunchedEffect to show a Toast with 'Welcome to Side Effects Demo!'.

Use SideEffect to update a log text on the screen each time the button is clicked.

Display the log text below the button.

Ensure the UI updates correctly without blocking the main thread.

Starter Code

Android Kotlin

import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

@Composable
fun SideEffectsDemo() {
    val context = LocalContext.current
    val clicked = remember { mutableStateOf(false) }
    val log = remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = { /* TODO: Handle click */ }) {
            Text("Show Welcome Message")
        }

        Text(text = "Log: ${log.value}", modifier = Modifier.padding(top = 16.dp))

        // TODO: Add LaunchedEffect and SideEffect here
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

@Composable
fun SideEffectsDemo() {
    val context = LocalContext.current
    val clicked = remember { mutableStateOf(false) }
    val log = remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = { clicked.value = true }) {
            Text("Show Welcome Message")
        }

        Text(text = "Log: ${log.value}", modifier = Modifier.padding(top = 16.dp))

        LaunchedEffect(clicked.value) {
            if (clicked.value) {
                Toast.makeText(context, "Welcome to Side Effects Demo!", Toast.LENGTH_SHORT).show()
            }
        }

        SideEffect {
            if (clicked.value) {
                log.value = "Button clicked at ${System.currentTimeMillis()}"
                clicked.value = false
            }
        }
    }
}

We use clicked state to track button clicks. When the button is clicked, clicked.value becomes true.

LaunchedEffect watches clicked.value. When it changes to true, it shows a Toast message asynchronously without blocking the UI.

SideEffect runs after every successful composition. It updates the log text with the current time and resets clicked.value to false to avoid repeated Toasts.

This way, the UI updates smoothly, showing the Toast and updating the log text below the button.

Final Result

Completed Screen

┌─────────────────────────────┐
│ Side Effects Demo            │
├─────────────────────────────┤
│ [Show Welcome Message]      │
│                             │
│ Log: Button clicked at 1680000000000 │
│                             │
└─────────────────────────────┘

When user taps 'Show Welcome Message', a Toast appears with 'Welcome to Side Effects Demo!'.

The log text updates below the button showing the timestamp of the click.

The button can be tapped multiple times to repeat the effect.

Stretch Goal

Add a counter that increments each time the button is clicked and display it next to the log.

💡 Hint

Use a separate mutableStateOf variable to track the count and update it inside SideEffect.