Hi, to avoid unnecessary hierarchies when displaying conditional elements i use the following approa...

# compose

[Christoph Wiesner]

Hi,
to avoid unnecessary hierarchies when displaying conditional elements i use the following approach:

val iconContent: @Composable () -> Unit = {
                Icon(...)
}

if (someCondition) {
    // wrap the icon in a box to display some overlapping composable
    Box(...) {
        iconContent()
        OverlayingComposable()
    }
} else {
    // 99% of the time the overlay is hidden - so only display the icon without the Box wrapper
    iconContent()
}

is this unnecessary optimization? bc. readability gets worse - or is there another approach?

[jossiwolf]

Our guidance for performance is

"Inspect, Improve and Monitor"▾

. That doesn't mean you should disregard performance but unless you're seeing issues, don't start optimizing. Compose is generally pretty good at managing trees so deep hierarchies are less of a concern than in the View system 🙂

[jossiwolf]

Box is a pretty cheap layout, plus it's an inline fun so that's rarely something to worry about, even if you're inspecting performance issues

[Christoph Wiesner]

Thank you!

[shikasd]

One other thing to consider is cost of rearranging the layout. Each time you show/hide overlay in the first sample, both box and icon are removed and icon is recreated again, which is usually worse
You can think about this in terms of "view-like" elements, going from box with something to plain icon requires way more rearrangement than adding/removing a child