CompositionLocal: Implicitly Pass Data Down the UI Tree
CompositionLocal is like CSS inheritance for your UI tree, letting you pass data down implicitly without parameter drilling. It's ideal for ambient data like theming or localization. The footgun is overusing it, which makes components harder to test.
Why it exists
Passing data through many layers of composables just to reach one deeply nested component is tedious and clutters your function signatures. This problem, often called "prop drilling," makes code hard to refactor and reason about. CompositionLocal was created to provide a clean, scoped alternative for this specific scenario.
The mental model
Think of CompositionLocal like CSS inheritance. A parent element can define a font color, and all child elements inside it will automatically inherit that color without needing it explicitly set on each one. A CompositionLocalProvider sets a value for a part of the UI tree, and any composable within that tree can read that value implicitly.
How it works
You first create a CompositionLocal using compositionLocalOf<Type>(), which acts as a key. You can provide a default value. Then, in your UI tree, you use a CompositionLocalProvider to supply a value for that key. Any composable function called within the provider's content lambda can access the provided value by using .current on the key. Composables that read the local will automatically recompose if the provided value changes.
When to use it
Use it for ambient, semi-static data that needs to be accessed by many different composables in a subtree. The classic examples are theming data (MaterialTheme.colors is backed by a CompositionLocal), the current Android Context (LocalContext.current), or providing a singleton service like an analytics client to a specific screen flow.
When not to use it
Do not use CompositionLocal as a general-purpose state management tool or a replacement for passing explicit parameters. If a composable's core job is to display a User object, that User should be an explicit parameter. Using a CompositionLocal for it makes the component's dependencies hidden, harder to test, and less reusable.
One canonical example
Accessing theme colors. The MaterialTheme composable wraps your app's content in a series of CompositionLocalProviders. This allows a Text composable, nested many layers deep, to access the primary color via MaterialTheme.colors.primary without you having to pass the colors object through every intermediate composable.
Interview question
Which scenario best justifies the use of CompositionLocal in a Jetpack Compose application?
- a.Passing a User object to a UserProfile composable, which is its primary data dependency.
- b.Managing the mutable state of a user input field that changes frequently.
- c.Ensuring all composables automatically recompose whenever any data in the UI tree changes.
- d.Providing a global analytics client instance to various deeply nested composables without explicit parameter passing.Correct
Why? this is the answer
CompositionLocal is ideal for ambient, semi-static data like a singleton service that needs to be accessed by many composables in a subtree, avoiding 'prop drilling'. Using it for mutable state or primary data dependencies (options A and C) is discouraged as it hides dependencies and complicates testing. Option C describes a side effect, not the primary justification for its use.
Just read this? Test yourself on what you have been reading.
Read the original → developer.android.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on jetpack compose — each one lists the topics its interview covers.
See open roles