---
title: "derivedMediaQuery"
description: "Evaluates a boolean query against the current [UiMediaScope], wrapped in a [derivedStateOf].

Use this function for queries that involve frequently changing values, such as
[UiMediaScope.windowWidth] or [UiMediaScope.windowHeight]. It ensures that compositions only
recompose when the boolean result of the [query] changes, not on every small change to the
underlying values (like a 1px size change).

For queries on stable properties, you can use the simpler [mediaQuery] function."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMediaQueryApi
@Composable
fun derivedMediaQuery(query: UiMediaScope.() -> Boolean): State<Boolean>
```


Evaluates a boolean query against the current `UiMediaScope`, wrapped in a `derivedStateOf`.

Use this function for queries that involve frequently changing values, such as
`UiMediaScope.windowWidth` or `UiMediaScope.windowHeight`. It ensures that compositions only
recompose when the boolean result of the `query` changes, not on every small change to the
underlying values (like a 1px size change).

For queries on stable properties, you can use the simpler `mediaQuery` function.

#### Parameters

| | |
| --- | --- |
| query | The condition to evaluate against the `UiMediaScope`. |


#### Returns

| | |
| --- | --- |
|  | A `State` holding the boolean result of the query. The state will only update when the evaluated result of the query changes. |





## Code Examples
### MediaQuerySample
```kotlin
@Composable
fun MediaQuerySample() {
    Box(Modifier.fillMaxSize().padding(top = 100.dp)) {
        val showDualPane by derivedMediaQuery { windowWidth >= 600.dp }
        val showNavigationRail by derivedMediaQuery {
            windowWidth >= 500.dp && viewingDistance != ViewingDistance.Near
        }
        Column(Modifier.fillMaxSize()) {
            Row(Modifier.weight(1f).fillMaxWidth()) {
                if (showNavigationRail) {
                    // Show navigation rail
                    Box(Modifier.width(150.dp).background(Color.Red).fillMaxHeight())
                }
                // Actual content
                Box(Modifier.weight(1f).background(Color.Yellow).fillMaxHeight())
                if (showDualPane) {
                    // Split screen into 2 panes for additional content
                    Box(Modifier.weight(1f).background(Color.Cyan).fillMaxHeight())
                }
            }
            if (!showNavigationRail && !showDualPane) {
                // Show bottom navigation
                Box(Modifier.background(Color.Blue).height(80.dp).fillMaxWidth())
            }
        }
    }
}
```