InJetpack Compose, we commonly heard about Recomposition and Remember, the two important concepts to grasps how one can work with Jetpack Compose.
However, when we check out the compose sample apps (e.g. Owl), we’ll see the code as below
CompositionLocalProvider(
LocalElevations provides elevation,
LocalImages provides images
) {
MaterialTheme(
colors = colors,
typography = typography,
shapes = shapes,
content = content
)
}
What is it?
A problem in normal composable function tree
Before we know what CompositionLocal is, let’s understand what problem the composable function tree has.
Imagine there’s a state variable data that will affect components deep beneath the top-level composable function, i.e. affected components that are indicated by the green color boxes below, then we need to send the state variable data through a lot of composable functions (as indicated by the blue color boxes below).