Side-Effects in Jetpack Compose

These are actions happening outside the scope of a composable function. When used right, side-effects can enhance your app’s performance. But they can also cause unintended behavior if not handled well. In this guide, we’ll break down the purpose and usage of key side-effect functions: LaunchedEffect, rememberCoroutineScope, rememberUpdatedState, DisposableEffect, SideEffect, and produceState.

What are Side-Effects in Compose?

In Compose, side-effects are any changes to your app’s state that happen outside the normal scope of a composable. This includes actions like showing a Snackbar, navigating screens, or triggering animations. Compose aims for a predictable UI lifecycle, so side-effects need careful handling to avoid unexpected behavior.

LaunchedEffect: Use Only for Major Changes

LaunchedEffect is often misunderstood. It’s not only about running code once when a composable enters the Composition. Instead, LaunchedEffect is designed to run whenever its key parameter changes. If the key changes, it cancels the ongoing coroutine and starts a new one. Here’s how it works:

Here’s an example:

@Composable
fun PulseAnimation() {
    var pulseRate by remember { mutableStateOf(3000L) }
    val alpha = remember { Animatable(1f) }

    LaunchedEffect(pulseRate) { // Re-runs when pulseRate changes
        while (isActive) {
            delay(pulseRate)
            alpha.animateTo(0f)
            alpha.animateTo(1f)
        }
    }
}

In this example, whenever pulseRate changes, LaunchedEffect cancels the current coroutine and restarts with the new delay. For a one-time effect, set the key to a fixed value, like true or Unit.

rememberCoroutineScope: Lifecycle-Aware Coroutine Scope

rememberCoroutineScope creates a coroutine scope tied to the composable’s lifecycle. If the composable leaves the screen, any coroutines in this scope are automatically cancelled. This makes it perfect for actions triggered by user events, like showing a Snackbar or updating UI components based on real-time data.

Usage example:

@Composable
fun SnackbarExample() {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()

    Button(onClick = {
        scope.launch {
            snackbarHostState.showSnackbar("This is a Snackbar!")
        }
    }) {
        Text("Show Snackbar")
    }
}

In this case, the coroutine scope ends when the composable is removed, ensuring efficient memory management.

rememberUpdatedState: Keep Track of Latest Values Without Restarting

With rememberUpdatedState, you can capture a changing value without restarting the effect where it’s used. This is useful when you have long-running operations but want the effect to access the latest value without restarting.

Example:

@Composable
fun SplashScreen(onTimeout: () -> Unit) {
    val currentOnTimeout by rememberUpdatedState(onTimeout)

    LaunchedEffect(true) {
        delay(3000)
        currentOnTimeout()
    }
}

Here, rememberUpdatedState lets onTimeout update with its latest value without resetting the LaunchedEffect. Perfect for situations where you want to keep the state updated in a long-running coroutine.

DisposableEffect: Clean Up After Effects

When you need an effect that involves setup and cleanup, use DisposableEffect. If the composable leaves the screen or the key changes, DisposableEffect’s cleanup function is triggered.

For example, if you’re tracking lifecycle events:

@Composable
fun HomeScreen(
    lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current,
    onStart: () -> Unit,
    onStop: () -> Unit
) {
    val currentOnStart by rememberUpdatedState(onStart)
    val currentOnStop by rememberUpdatedState(onStop)

    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            if (event == Lifecycle.Event.ON_START) currentOnStart()
            if (event == Lifecycle.Event.ON_STOP) currentOnStop()
        }

        lifecycleOwner.lifecycle.addObserver(observer)

        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }
}

DisposableEffect allows us to remove the observer when lifecycleOwner changes or when the composable is disposed of.

SideEffect: Communicate With Non-Compose Code

For actions where you need to communicate Compose state with external non-Compose components, use SideEffect. It executes after every successful recomposition.

@Composable
fun rememberFirebaseAnalytics(user: User): FirebaseAnalytics {
    val analytics: FirebaseAnalytics = remember { FirebaseAnalytics() }

    SideEffect {
        analytics.setUserProperty("userType", user.userType)
    }
    return analytics
}

In this example, SideEffect lets us update the analytics object with the latest user properties whenever a recomposition completes.

produceState: Turning External State into Compose State

Use produceState to turn external state, like data from a network or a Flow, into Compose’s State that you can observe in your UI.

Example for loading an image:

@Composable
fun loadNetworkImage(
    url: String,
    imageRepository: ImageRepository = ImageRepository()
): State<Result<Image>> {
    return produceState(initialValue = Result.Loading, url, imageRepository) {
        val image = imageRepository.load(url)
        value = if (image == null) Result.Error else Result.Success(image)
    }
}

Here, produceState keeps track of network calls. The coroutine launches when the composable enters the Composition and cancels when it exits, making it highly efficient for fetching data without leaks.