In Jetpack Compose, a modern UI toolkit for Android, side effects are ways to handle changes outside the UI hierarchy that need to be reflected in your Compose functions or to ensure certain actions take place as a result of state changes. Side effects help bridge the gap between the declarative nature of Compose and the imperative interactions that might be needed, such as updating a database, logging, or performing a one-time action.

Key Side Effect APIs in Jetpack Compose

Here’s a breakdown of the main side effect functions provided by Compose and how they are typically used:

1.SideEffect
What is it?

• SideEffect is used to run code whenever the Composable function is re-composed. It ensures that code inside it will always run after the Composable function has finished rendering.

Use Case:

• Logging or reporting analytics.
• You want to perform some actions that are related to the UI but don’t directly affect its state.

@Composable
fun ExampleSideEffect(name: String) {
    Text("Hello, $name")
    SideEffect {
        Log.d("ExampleSideEffect", "Composed with name: $name")
    }
}

– This will log a message every time the name parameter changes, which means that the ExampleSideEffect gets recomposed.

2. LaunchedEffect

What is it?

• LaunchedEffect is used for running suspend functions (coroutines) when a particular key changes. It runs its block of code when the Composable enters the composition and again when its keys change.
• It cancels any previous coroutine if the key changes.

Use Case:

• Fetching data from a network or database when a particular state changes.
• Showing a one-time toast message when the UI is first composed.

Example:

@Composable
fun ExampleLaunchedEffect(userId: String) {
    var userName by remember { mutableStateOf("") }

    LaunchedEffect(userId) {
        // Fetch user data when userId changes.
        userName = fetchUserName(userId)
    }

    Text("User name is $userName")
}

In this example, whenever the userId changes, LaunchedEffect fetches the user name.

3. rememberUpdatedState

What is it?

• This is used when you want a stable reference to some changing state within a side effect.
• It ensures that the latest value is available for a side effect while keeping the side effect stable.

Use Case:

• You are launching a coroutine or a callback, but you want the latest state to be used within that coroutine.

Example:

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

    LaunchedEffect(Unit) {
        delay(5000)
        currentOnTimeout() // Uses the latest version of onTimeout.
    }
}

This ensures that if onTimeout changes, the LaunchedEffect will still call the latest onTimeout even though it might have been launched with an older version.

4. DisposableEffect

What is it?

• DisposableEffect is used when you need to perform cleanup actions when a Composable leaves the composition.
• It is similar to LaunchedEffect, but it provides a Disposable function for cleanup when the effect should be disposed of.

Use Case:

• Starting and stopping a listener, such as a location listener or a sensor.
• Cleaning up resources, like closing a database connection or canceling a network request.

Example:

@Composable
fun ExampleDisposableEffect() {
    DisposableEffect(Unit) {
        val listener = MyListener()
        listener.startListening()

        onDispose {
            listener.stopListening() // Clean up when this Composable leaves the composition.
        }
    }

    Text("Listening for updates...")
}

This starts `MyListener` when the `Composable` enters the composition and stops it when the `Composable` leaves the composition.

5. produceState

What is it?

• produceState is used to convert non-Compose state into State that can be used in Compose. It launches a coroutine and updates its State over time.

Use Case:

• Fetching data from a repository and exposing it as a State that Composable can observe.

Example:

@Composable
fun ExampleProduceState(userId: String): State<String> {
    return produceState(initialValue = "Loading...", userId) {
        value = fetchUserName(userId)
    }
}

This creates a state that initially holds "Loading…” and updates with the user’s name once it’s fetched.

6. snapshotFlow

What is it?

• snapshotFlow is used when you want to observe changes to a State and convert them into a Flow.

Use Case:

• Reacting to changes in a State variable and processing them in a coroutine.

Example

@Composable
fun ExampleSnapshotFlow(counter: State<Int>) {
    LaunchedEffect(Unit) {
        snapshotFlow { counter.value }
            .collect { newValue ->
                Log.d("ExampleSnapshotFlow", "Counter changed to $newValue")
            }
    }
}

Here, any changes to counter will be collected and logged.

7. rememberCoroutineScope

What is it?

• rememberCoroutineScope is used to create a CoroutineScope tied to the lifecycle of a Composable. It provides a CoroutineScope that can be used to launch coroutines for background work, such as network requests or animations, from inside a Composable.
• This scope is cancelled automatically when the Composable leaves the composition, so you don’t need to manage its lifecycle manually.

Use Case:

• Triggering an asynchronous action when the user interacts with the UI, such as starting an animation or fetching data on button clicks.

Example

@Composable
fun ExampleRememberCoroutineScope() {
    val coroutineScope = rememberCoroutineScope()
    var text by remember { mutableStateOf("Click to load") }

    Button(onClick = {
        coroutineScope.launch {
            text = loadDataFromNetwork()
        }
    }) {
        Text(text)
    }
}

suspend fun loadDataFromNetwork(): String {
    delay(2000) // Simulate a network delay
    return "Data loaded"
}

In this example, rememberCoroutineScope allows us to launch a coroutine when the button is clicked, making the UI reactive to the asynchronous data loading without needing to manage the scope manually.