Side Effects: Side Effect - devrath/ComposeAlchemy GitHub Wiki

  • Side effects are operations that are not directly related to the rendering of UI elements but may impact the application state.
  • Every time the parent enclosed composable is composed, the block's side-effect is triggered.
  • Very limited use case

Demo

Observation

  • Note that the side-effect of a composable is triggered when its enclosed composable is composed.
  • You can observe that when we click a button, we update the state, All other composables are re-composed but the button composable is not recomposed, so the composable's side-effect is not composed.
  • An interesting observation here is how the composition occurs top composable is composed then the children.
  • Also all the composables are composed and then the side-effect is triggered on the order of composition.

Output

// <---------------------------- Initial Composition --------------------------------->
Root composable is composed
(BLUE) composable is composed
(GREEN) composable is composed
Button composable is composed
(RED) composable is composed
Root Side effect is triggered
Blue composable Side effect is triggered
Green composable Side effect is triggered
Button composable Side effect is triggered
Red composable Side effect is triggered
// <----------- Click the button for the first time to update the counter  ----------->
Root composable is composed
(BLUE) composable is composed
(GREEN) composable is composed
(RED) composable is composed
Root Side effect is triggered
Blue composable Side effect is triggered
Green composable Side effect is triggered
Red composable Side effect is triggered

Code

@Composable
fun TypeSideEffect(navController: NavHostController) {

    val count = remember { mutableIntStateOf(0) }

    // Use SideEffect to log the current value of count
    SideEffect {
        // Called on every recomposition
        println("Root Side effect is triggered")
    }

    println("Root composable is composed")

    Column(
        modifier = Modifier
            .background(color = Color.Blue)
            .fillMaxSize()
            .padding(30.dp)
    ) {

        println("(BLUE) composable is composed")

        SideEffect {
            // Called on every recomposition
            println("Blue composable Side effect is triggered")
        }

        Column(
            modifier = Modifier
                .weight(1f).fillMaxWidth()
                .height(100.dp)
                .background(Color.Green),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            println("(GREEN) composable is composed")

            SideEffect {
                // Called on every recomposition
                println("Green composable Side effect is triggered")
            }

            Text(
                text = "${count.value}",
                color = Color.Magenta,
                fontSize = 38.sp
            )

            Spacer(modifier = Modifier.height(40.dp))

            Button(onClick = { count.value++ }) {
                println("Button composable is composed")
                Text(text = "Increase count")

                SideEffect {
                    // Called on every recomposition
                    println("Button composable Side effect is triggered")
                }
            }
        }

        Column(
            modifier = Modifier
                .weight(1f).fillMaxWidth()
                .height(100.dp)
                .background(Color.Red),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            println("(RED) composable is composed")

            SideEffect {
                // Called on every recomposition
                println("Red composable Side effect is triggered")
            }
        }
    }

}
⚠️ **GitHub.com Fallback** ⚠️