Explain CompositionLocal and its use cases in Jetpack Compose?

Overview

CompositionLocal provides implicit dependency injection down the composition tree.

Problem It Solves

kotlinCopy
// ❌ Prop drilling - passing through many layers
@Composable
fun App(theme: Theme) {
    Screen(theme)
}

@Composable
fun Screen(theme: Theme) {
    Content(theme)
}

@Composable
fun Content(theme: Theme) {
    Text("Hello", color = theme.textColor)
}

Solution with CompositionLocal

kotlinCopy
// Define CompositionLocal
val LocalTheme = compositionLocalOf<Theme> {
    error("No theme provided")
}

// Provide value
@Composable
fun App() {
    CompositionLocalProvider(LocalTheme provides DarkTheme) {
        Screen() // No need to pass theme
    }
}

// Consume value
@Composable
fun Content() {
    val theme = LocalTheme.current
    Text("Hello", color = theme.textColor)
}

Built-in CompositionLocals

kotlinCopy
// Context
val context = LocalContext.current

// Configuration
val configuration = LocalConfiguration.current

// Density
val density = LocalDensity.current

// Text style
val textStyle = LocalTextStyle.current

Creating Custom CompositionLocal

Static Value

kotlinCopy
data class AppConfig(val apiKey: String, val baseUrl: String)

val LocalAppConfig = staticCompositionLocalOf {
    AppConfig("", "")
}

Dynamic Value

kotlinCopy
val LocalUser = compositionLocalOf<User?> { null }

@Composable
fun UserProvider(user: User, content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalUser provides user) {
        content()
    }
}

Use Cases

1. Theme

kotlinCopy
@Composable
fun MaterialTheme(
    colors: Colors,
    typography: Typography,
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(
        LocalColors provides colors,
        LocalTypography provides typography
    ) {
        content()
    }
}

2. Navigation

kotlinCopy
val LocalNavController = compositionLocalOf<NavController> {
    error("No NavController")
}

@Composable
fun MyButton() {
    val navController = LocalNavController.current
    Button(onClick = { navController.navigate("details") }) {
        Text("Go")
    }
}

3. Repository/ViewModel

kotlinCopy
val LocalRepository = compositionLocalOf<UserRepository> {
    error("No repository")
}

@Composable
fun App() {
    val repository = remember { UserRepository() }
    
    CompositionLocalProvider(LocalRepository provides repository) {
        HomeScreen()
    }
}

staticCompositionLocalOf vs compositionLocalOf

kotlinCopy
// Use staticCompositionLocalOf when value rarely changes
val LocalAppConfig = staticCompositionLocalOf { AppConfig() }

// Use compositionLocalOf when value changes frequently
val LocalUser = compositionLocalOf<User?> { null }

Performance:

• textCopy

  staticCompositionLocalOf

  : Changing value recomposes entire tree
• textCopy

  compositionLocalOf

  : Only recomposes consumers

Best Practice: Use CompositionLocal sparingly. Explicit parameters are usually better.