Advanced State Management in Compose: Effects and Flows

This article explores advanced state management patterns in Jetpack Compose, focusing on Effects and Flow integration. For fundamental concepts like mutableStateOf and state hoisting, check out our companion article Basic State Management in Jetpack Compose.

Understanding Compose Effects

Effects in Compose are tools to handle side effects and lifecycle events in a composable-friendly way. Let’s explore the different types of effects and their use cases:

LaunchedEffect: Coroutine-based Side Effects

LaunchedEffect launches a coroutine that is automatically cancelled when the composable leaves the composition:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@Composable
fun AutoRefreshingList(viewModel: ListViewModel) {
    // Starts a coroutine that refreshes data every 30 seconds
    LaunchedEffect(Unit) {
        while(true) {
            viewModel.refreshData()
            delay(30_000)
        }
    }

    // The key parameter controls when the effect should restart
    LaunchedEffect(viewModel.searchQuery) {
        viewModel.performSearch()
    }
}

SideEffect: Synchronizing with Non-Compose Code

SideEffect is called on every successful recomposition to sync Compose state with non-Compose code:

1
2
3
4
5
6
7
@Composable
fun AnalyticsScreen(screenName: String) {
    SideEffect {
        // Called after every successful recomposition
        AnalyticsTracker.trackScreen(screenName)
    }
}

DisposableEffect: Cleanup Operations

DisposableEffect handles cleanup when a composable leaves the composition:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@Composable
fun NetworkMonitor(onConnectionChange: (Boolean) -> Unit) {
    DisposableEffect(Unit) {
        val listener = NetworkListener(onConnectionChange)
        listener.register()

        onDispose {
            listener.unregister()
        }
    }
}

derivedStateOf: Computed State

derivedStateOf creates a state that’s automatically updated when its dependencies change. It’s particularly useful for threshold-based computations and UI state derivations that shouldn’t trigger recompositions on every small change:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.derivedStateOf

// Example showing how derivedStateOf helps prevent unnecessary 
// recompositions when working with scroll state
@Composable
fun ScrollableNewsScreen() {
    val listState = rememberLazyListState()

    // ❌ Without derivedStateOf
    // These properties would recompute on every scroll pixel change,
    // causing unnecessary recompositions of any composable that reads them
    // val showScrollToTop = listState.firstVisibleItemIndex > 0
    // val isScrollInProgress = listState.isScrollInProgress

    // ✅ With derivedStateOf
    // These computations only trigger when crossing specific thresholds,
    // significantly reducing unnecessary recompositions
    val showScrollToTop by remember {
        derivedStateOf {
            // Only show button when scrolled past first item
            listState.firstVisibleItemIndex > 0
        }
    }

    val shouldLoadMore by remember {
        derivedStateOf {
            val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
            // Trigger pagination when user is close to the end
            lastVisibleItem?.index != null && 
                lastVisibleItem.index >= listState.layoutInfo.totalItemsCount - 3
        }
    }

    val isScrollingUp by remember {
        derivedStateOf {
            // Track scroll direction based on first visible item
            listState.firstVisibleItemScrollOffset < 100
        }
    }

    // Use these derived states to control UI elements like:
    // - Scroll to top button visibility (showScrollToTop)
    // - Pagination loading (shouldLoadMore)
    // - Collapsing/Expanding top bar (isScrollingUp)
    NewsScreenContent(
        showScrollButton = showScrollToTop,
        isScrollingUp = isScrollingUp,
        shouldLoadMore = shouldLoadMore
    )
}

// Note: Implementation of NewsScreenContent and other UI components omitted for brevity

produceState: Converting Non-Compose State to State

produceState converts non-Compose state sources into Compose state:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@Composable
fun UserProfile(userId: String) {
    val user by produceState<User?>(initialValue = null, userId) {
        value = userRepository.fetchUser(userId)

        awaitDispose {
            // Cleanup if needed
        }
    }
}

Flow Integration with Compose

When working with Flows in Compose, we need to convert them into Compose state. Jetpack Compose provides two main functions for this purpose: collectAsState and collectAsStateWithLifecycle.

collectAsState: Basic Flow Collection

collectAsState converts a Flow into a Compose State:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@Composable
fun UserProfile(viewModel: UserViewModel) {
    // Basic collection
    val name by viewModel.nameFlow.collectAsState()

    // With initial value
    val count by viewModel.countFlow.collectAsState(initial = 0)

    // Handling nullable flows
    val user by viewModel.userFlow.collectAsState(initial = null)

    Text("Name: $name")
    Text("Count: $count")
    user?.let { Text("User: ${it.name}") }
}

collectAsStateWithLifecycle: Lifecycle-Aware Collection

collectAsStateWithLifecycle is the recommended way to collect flows in Compose as it respects the lifecycle of the composable. It provides several benefits over collectAsState:

Automatically stops collection when the composable is not visible
Resumes collection when the composable becomes visible again
Reduces unnecessary processing and battery consumption
Prevents memory leaks by properly cleaning up resources
Allows fine-grained control over when collection should occur

Here’s how to use it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Data types for the example
data class UserUpdate(
    val id: String,
    val message: String,
    val timestamp: Long
)

@Composable
fun UserUpdates(viewModel: UserViewModel) {
    // Basic lifecycle-aware collection
    val updates by viewModel.userUpdatesFlow
        .collectAsStateWithLifecycle(initialValue = emptyList())

    // Custom lifecycle state
    val notifications by viewModel.notificationsFlow
        .collectAsStateWithLifecycle(
            initialValue = emptyList(),
            lifecycle = lifecycle,
            minActiveState = Lifecycle.State.RESUMED // Only collect when RESUMED
        )

    LazyColumn {
        items(updates) { update: UserUpdate ->
            UpdateItem(update)
        }
    }
}

Conclusion

Advanced state management in Compose requires understanding both Effects and Flow integration. Effects help you handle side effects and lifecycle events, while proper Flow integration ensures efficient state collection that respects the Android lifecycle.

Remember to:

Choose the appropriate Effect for your use case
Use collectAsStateWithLifecycle for Flow integration when collecting from flows
Test your state management implementation thoroughly

For fundamental state management concepts, check out our companion article Basic State Management in Jetpack Compose.