santimattius/performance-compose-skills/compose-modifier-system

// Scroll state that changes on every frame
val scrollState = rememberScrollState()
 
// ❌ Value overload — reads scrollState.value during Composition
// Every scroll tick recomposes the entire composable scope
Box(
    Modifier
        .offset(x = 0.dp, y = scrollState.value.dp)  // read in Composition
        .size(100.dp)
        .background(Color.Blue)
)
 
// ✅ Lambda overload — reads scrollState.value during Layout phase only
// Scroll ticks do NOT trigger recomposition; Layout phase runs instead
Box(
    Modifier
        .offset { IntOffset(x = 0, y = scrollState.value) }  // read in Layout
        .size(100.dp)
        .background(Color.Blue)
)

// ❌ DEPRECATED — allocates on every recompose, cannot skip
fun Modifier.fade(enable: Boolean): Modifier = composed {
    val alpha by animateFloatAsState(if (enable) 0.5f else 1.0f)
    this.graphicsLayer { this.alpha = alpha }
}
 
// ✅ CORRECT — ModifierNodeElement + Modifier.Node; no allocation on recompose
fun Modifier.circleBackground(color: Color) = this then CircleElement(color)
 
private data class CircleElement(val color: Color) : ModifierNodeElement<CircleNode>() {
    override fun create() = CircleNode(color)
    override fun update(node: CircleNode) { node.color = color }
}
 
private class CircleNode(var color: Color) : DrawModifierNode, Modifier.Node() {
    override fun ContentDrawScope.draw() {
        drawCircle(color)
        drawContent()
    }
}

// ❌ Missing data class — update() fires every recomposition even with same color
private class CircleElement(val color: Color) : ModifierNodeElement<CircleNode>() { ... }
 
// ✅ data class — equals/hashCode are auto-generated; update() only fires when color changes
private data class CircleElement(val color: Color) : ModifierNodeElement<CircleNode>() { ... }

private class OffsetNode(var x: Dp, var y: Dp) : LayoutModifierNode, Modifier.Node() {
 
    override val shouldAutoInvalidate: Boolean = false  // take control
 
    fun update(x: Dp, y: Dp) {
        if (this.x != x || this.y != y) invalidatePlacement()  // layout only — no redraw
        this.x = x
        this.y = y
    }
 
    override fun MeasureScope.measure(measurable: Measurable, constraints: Constraints): MeasureResult {
        val placeable = measurable.measure(constraints)
        return layout(placeable.width, placeable.height) {
            placeable.placeRelative(x.roundToPx(), y.roundToPx())
        }
    }
}

// Tier 1 — drawBehind: static gradient background
Modifier.drawBehind {
    drawRect(Color.LightGray)
}
 
// Tier 2 — drawWithContent: overlay after content
Modifier.drawWithContent {
    drawContent()
    drawRect(Color.Black.copy(alpha = 0.3f))  // dimmer overlay on top
}
 
// Tier 3 — drawWithCache: expensive Brush created once, reused every frame
Modifier.drawWithCache {
    // onBuildDrawCache block — runs only when size or observed state changes
    val brush = Brush.linearGradient(
        colors = listOf(Color.Red, Color.Blue),
        start = Offset.Zero,
        end = Offset(size.width, size.height)
    )
    onDrawBehind {
        drawRect(brush)  // brush reused from cache — no allocation per frame
    }
}

val animAlpha by animateFloatAsState(if (visible) 1f else 0f)
 
// ❌ Property overload — reads animAlpha in Composition phase; recomposes on every frame
Modifier.graphicsLayer(alpha = animAlpha)
 
// ✅ Lambda overload — reads animAlpha in Drawing phase only; zero recompositions
Modifier.graphicsLayer { alpha = animAlpha }

// ✅ Non-overlapping content — skip GPU buffer
Modifier.graphicsLayer {
    alpha = 0.5f
    compositingStrategy = CompositingStrategy.ModulateAlpha
}

// ❌ Runtime crash — measurable.measure() called twice
Layout(content = content) { measurables, constraints ->
    val size = measurables[0].measure(constraints)   // first measure
    val real = measurables[0].measure(constraints)   // CRASH: already measured
    layout(real.width, real.height) { real.place(0, 0) }
}
 
// ✅ Use intrinsics for pre-measurement queries — separate pass, not re-measurement
val minWidth = measurables[0].minIntrinsicWidth(constraints.maxHeight)
val placeable = measurables[0].measure(constraints)

// ❌ Wrong — Dp passed where pixels are expected
drawCircle(color = Color.Red, radius = 24.dp)
 
// ✅ Convert using the Density receiver available in DrawScope / MeasureScope
drawCircle(color = Color.Red, radius = 24.dp.toPx())
 
// ✅ Or use density explicitly when outside a receiver scope
with(density) { 24.dp.toPx() }

// background BEFORE padding — background fills the outer (larger) area
Modifier
    .background(Color.Red)   // draws behind padding + content
    .padding(16.dp)          // content area shrinks inward
    .background(Color.Blue)  // draws behind content only
 
// clickable BEFORE padding — click target includes the padded area
Modifier
    .clickable { }
    .padding(24.dp)
// vs.
// clickable AFTER padding — click target is only the inner content, not the padding
Modifier
    .padding(24.dp)
    .clickable { }