How do you handle side effects in Jetpack Compose?

Overview

Side effects are operations that escape the scope of a composable function.

---

Side Effect APIs

---

1. LaunchedEffect

kotlinCopy
@Composable
fun LoadDataScreen(userId: String) {
    var user by remember { mutableStateOf<User?>(null) }
    
    LaunchedEffect(userId) {
        user = repository.fetchUser(userId)
    }
    
    user?.let { Text(it.name) }
}

Cancellation

kotlinCopy
LaunchedEffect(key1) {
    // Cancelled when key1 changes or composable leaves composition
    val data = fetchData()
    updateUI(data)
}

---

2. DisposableEffect

kotlinCopy
@Composable
fun LocationUpdates() {
    DisposableEffect(Unit) {
        val listener = LocationListener { location ->
            // Handle location
        }
        locationManager.addListener(listener)
        
        onDispose {
            locationManager.removeListener(listener)
        }
    }
}

---

3. SideEffect

kotlinCopy
@Composable
fun AnalyticsScreen(screenName: String) {
    SideEffect {
        analytics.logScreenView(screenName)
    }
}

---

4. rememberCoroutineScope

kotlinCopy
@Composable
fun ScrollToTopButton(listState: LazyListState) {
    val scope = rememberCoroutineScope()
    
    Button(
        onClick = {
            scope.launch {
                listState.animateScrollToItem(0)
            }
        }
    ) {
        Text("Scroll to Top")
    }
}

---

Common Patterns

Network Call

kotlinCopy
@Composable
fun UserProfile(userId: String, viewModel: UserViewModel) {
    val user by viewModel.user.collectAsState()
    
    LaunchedEffect(userId) {
        viewModel.loadUser(userId)
    }
    
    user?.let { Text(it.name) }
}

Timer

kotlinCopy
@Composable
fun Timer() {
    var seconds by remember { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Text("Seconds: $seconds")
}

Listener Registration

kotlinCopy
@Composable
fun ConnectivityStatus() {
    var isOnline by remember { mutableStateOf(true) }
    
    DisposableEffect(Unit) {
        val callback = ConnectivityCallback { online ->
            isOnline = online
        }
        connectivityManager.registerCallback(callback)
        
        onDispose {
            connectivityManager.unregisterCallback(callback)
        }
    }
    
    Text(if (isOnline) "Online" else "Offline")
}

---

derivedStateOf

kotlinCopy
@Composable
fun TodoList(todos: List<Todo>) {
    val completedCount by remember {
        derivedStateOf {
            todos.count { it.isCompleted }
        }
    }
    
    Text("Completed: $completedCount / ${todos.size}")
}

Rule: Use side effects APIs for operations outside Compose. Never perform side effects directly in composable bodies.