How to Use DisposableEffect in Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. One of the powerful tools provided by Jetpack Compose is the DisposableEffect function. This function allows you to perform side effects in your composable functions that need to be cleaned up when the composable leaves the composition.

What is DisposableEffect?

DisposableEffect is a composable function that takes in a set of keys and a callback function. The callback function is called when the composable enters the composition and it returns a DisposableEffect object. This object has a dispose method that is called when the composable leaves the composition.

Here's an example of how to use DisposableEffect:

Copycopy code to clipboard
1@Composable
2fun MyComposable() {
3    DisposableEffect(Unit) {
4        // Perform side effect here
5        onDispose {
6            // Clean up side effect here
7        }
8    }
9}

In this example, we pass Unit as the key to DisposableEffect. This means that the callback function will be called every time MyComposable enters the composition. The onDispose block is called when MyComposable leaves the composition.

Using keys with DisposableEffect

You can pass multiple keys to DisposableEffect. The callback function will only be called if one of the keys changes. This is useful if you want to perform a side effect based on some state.

Here's an example:

Copycopy code to clipboard
1@Composable
2fun MyComposable(name: String) {
3    DisposableEffect(name) {
4        // Perform side effect here
5        onDispose {
6            // Clean up side effect here
7        }
8    }
9}

In this example, we pass name as the key to DisposableEffect. The callback function will only be called if name changes.

Example: Using DisposableEffect to listen for connectivity changes

Let's say we want to create a composable function that displays the current network connectivity status of the device. We can use a BroadcastReceiver to listen for connectivity changes and update our composable accordingly.

Here's how we can do this using DisposableEffect:

Copycopy code to clipboard
1@Composable
2fun NetworkStatus() {
3    val context = LocalContext.current
4    var isConnected by remember { mutableStateOf(true) }
5
6    DisposableEffect(context) {
7        val intentFilter = IntentFilter(ConnectivityManager.CONNECTIVITY_ACTION)
8        val broadcastReceiver = object : BroadcastReceiver() {
9            override fun onReceive(context: Context?, intent: Intent?) {
10                val connectivityManager = context?.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
11                val networkInfo = connectivityManager.activeNetworkInfo
12                isConnected = networkInfo != null && networkInfo.isConnected
13            }
14        }
15        context.registerReceiver(broadcastReceiver, intentFilter)
16        onDispose {
17            context.unregisterReceiver(broadcastReceiver)
18        }
19    }
20
21    Text(text = if (isConnected) "Connected" else "Not connected")
22}

In this example, we use DisposableEffect to register a BroadcastReceiver when our composable enters the composition. We pass context as the key to DisposableEffect, so the callback function will only be called if context changes.

Inside the callback function, we create an IntentFilter for the CONNECTIVITY_ACTION action and a BroadcastReceiver that updates the isConnected state when it receives an intent.

We then register our BroadcastReceiver using the registerReceiver method of the Context object. Finally, we use the onDispose block to unregister our BroadcastReceiver when our composable leaves the composition.

Conclusion

DisposableEffect is a powerful tool provided by Jetpack Compose that allows you to perform side effects in your composable functions that need to be cleaned up when the composable leaves the composition. You can use keys to control when the callback function is called. I hope this article has helped you understand DisposableEffect and why it is so useful!