Avoiding common coroutine mistakes in Compose (KotlinConf '23)

Compose and coroutines work great together, but there are certain patterns you need to avoid when combining them. In this session, we’ll look at some common pitfalls, detail why and how they cause problems, and see what patterns or APIs should be used instead.

More info and resources: https://zsmb.co/appearances/kotlinconf-2023-day2/

Transcript

1. Márton Braun @zsmb13 Developer Relations Engineer Google Avoiding common coroutine mistakes in Compose KotlinConf’23 Amsterdam
2. Avoiding common coroutine mistakes in Compose
3. Avoiding common coroutine mistakes in Compose Data layer UI layer UI elements ViewModel
4. Avoiding common coroutine mistakes in Compose UI layer ViewModel Data layer UI elements
5. Lint is pretty good.
6. Data UI Composition Layout Drawing Compose phases goo.gle/mad-skills-compose-phases
7. Data UI Composition Layout Drawing Compose phases goo.gle/mad-skills-compose-phases
8. Column { Row { Icon() Text() } Image() Row { Column { Text() Text() } } } Composition goo.gle/mad-skills-compose-phases
9. Column { Row { Icon() Text() } Image() Row { Column { Text() Text() } } } Composition goo.gle/mad-skills-compose-phases
10. Composable functions can... • Be called very frequently
11. Composable functions can... • Be called very frequently • Execute in any order
12. Composable functions can... • Be called very frequently • Execute in any order • Run in parallel*
13. Creating coroutines in the composition
14. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
15. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
16. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
17. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
18. Creating coroutines in composition
19. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
20. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } } In the Composition Not in the Composition
21. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { val coroutineScope = rememberCoroutineScope() Column { coroutineScope.launch { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } } In the Composition Not in the Composition
22. @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { Column { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } } @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { Column { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } } Creating coroutines in the composition val coroutineScope = rememberCoroutineScope() coroutineScope.launch {
23. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { Column { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } } LaunchedEffect() {
24. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { Column { LaunchedEffect() { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
25. Creating coroutines in the composition @Composable fun HomeScreen( time: String, connected: Boolean, snackbarHostState: SnackbarHostState, ) { Column { LaunchedEffect(connected, snackbarHostState) { val message = if (connected) "Connected and ready!" else "No connection :(" snackbarHostState.showSnackbar(message) } Text(text = "It's $time, a great time to order a pizza!") } }
26. A positive example
27. A positive example
28. A positive example @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState() LazyColumn(state = listState) { /* Show pizza items... */ } FloatingActionButton( onClick = { listState.animateScrollToItem(0) } ) { Icon(Icons.Filled.ArrowUpward) } } }
29. A positive example @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState() LazyColumn(state = listState) { /* Show pizza items... */ } FloatingActionButton( onClick = { listState.animateScrollToItem(0) } ) { Icon(Icons.Filled.ArrowUpward) } } }
30. A positive example @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState() LazyColumn(state = listState) { /* Show pizza items... */ } FloatingActionButton( onClick = { listState.animateScrollToItem(0) } ) { Icon(Icons.Filled.ArrowUpward) } } }
31. A positive example @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState() LazyColumn(state = listState) { /* Show pizza items... */ } FloatingActionButton( onClick = { listState.animateScrollToItem(0) } ) { Icon(Icons.Filled.ArrowUpward) } } }
32. FloatingActionButton( onClick = { } ) { Icon(Icons.Filled.ArrowUpward) } } } listState.animateScrollToItem(0) A positive example @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState() LazyColumn(state = listState) { /* Show pizza items... */ }
33. A positive example FloatingActionButton( onClick = { } ) { Icon(Icons.Filled.ArrowUpward) } } } val scope = rememberCoroutineScope() listState.animateScrollToItem(0) LazyColumn(state = listState) { /* Show pizza items... */ } scope.launch { } @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState()
34. A positive example @Composable fun PizzaList(pizzas: List<Pizza>, modifier: Modifier = Modifier) { Box(modifier) { val listState = rememberLazyListState() val scope = rememberCoroutineScope() LazyColumn(state = listState) { /* Show pizza items... */ } FloatingActionButton( onClick = { scope.launch { listState.animateScrollToItem(0) } } ) { Icon(Icons.Filled.ArrowUpward) } } }
35. Creating Flows in the composition
36. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) 0 3 2 1 4 7 6 5
37. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { }
38. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { } 1 2 3 4 5 6 7 8 9 10 numbers
39. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = numbers.map { it % 8 } } 1 2 3 4 5 6 7 8 9 10 numbers phaseFlow 1 2 3 4 5 6 7 0 1 2 map
40. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = numbers.map { it % 8 } val phase by phaseFlow.collectAsState(initial = 0) }
41. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = numbers.map { it % 8 } val phase: Int by phaseFlow.collectAsState(initial = 0) }
42. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = numbers.map { it % 8 } val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) }
43. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = numbers.map { it % 8 } val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) }
44. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = numbers.map { it % 8 } val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) }
45. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) } numbers.map { it % 8 }
46. Creating Flows in the composition numbers.map { it % 8 } @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) }
47. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = remember(numbers) { } val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) } numbers.map { it % 8 }
48. Creating Flows in the composition @Composable fun RotatedPizzaSlice(phase: Int) @Composable fun PizzaLoader(numbers: Flow<Int>) { val phaseFlow = remember(numbers) { } val phase by phaseFlow.collectAsState(initial = 0) RotatedPizzaSlice(phase) } numbers.map { it % 8 }
49. Using StateFlow values
50. Using StateFlow values class PizzaViewModel( repository: PizzaRepository ) : ViewModel() { val pizzas: StateFlow<List<Pizza>> = repository.getAllPizzas() .stateIn( scope = viewModelScope, started = SharingStarted.WhileSubscribed(5000L), initialValue = PizzaRepository.DEFAULT_PIZZAS, ) }
51. Using StateFlow values class PizzaViewModel( repository: PizzaRepository ) : ViewModel() { val pizzas: StateFlow<List<Pizza>> = repository.getAllPizzas() .stateIn( scope = viewModelScope, started = SharingStarted.WhileSubscribed(5000L), initialValue = PizzaRepository.DEFAULT_PIZZAS, ) }
52. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>)
53. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>) @Composable fun LivePizzaList(vm: PizzaViewModel) { }
54. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>) @Composable fun LivePizzaList(vm: PizzaViewModel) { val prices = vm.pizzas.value PizzaList(prices) }
55. Using StateFlow values
56. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>) @Composable fun LivePizzaList(vm: PizzaViewModel) { val prices = vm.pizzas.value PizzaList(prices) }
57. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>) @Composable fun LivePizzaList(vm: PizzaViewModel) { val prices = vm.pizzas.value PizzaList(prices) }
58. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>) @Composable fun LivePizzaList(vm: PizzaViewModel) { val prices by vm.pizzas.collectAsState() PizzaList(prices) }
59. Using StateFlow values @Composable fun PizzaList(pizzas: List<Pizza>) @Composable fun LivePizzaList(vm: PizzaViewModel) { val prices by vm.pizzas.collectAsStateWithLifecycle() PizzaList(prices) } goo.gle/consume-flows-safely
60. Using StateFlow values
61. Summary • Watch out for what happens in the Composition • Use LaunchedEffect to call suspending functions • Collect StateFlows as State • Use collectAsStateWithLifecycle on Android
62. Resources • goo.gle/mad-skills-compose-phases • goo.gle/compose-side-effects • goo.gle/consume-flows-safely
63. Thank you, and don’t forget to vote! KotlinConf’23 Amsterdam Márton Braun @zsmb13 Developer Relations Engineer Google