Hiding elements best practices

[HEAVYPOLY]

Which way is more efficient to hide elements using vanJS? Especially in the case of very complicated content(a scrollable menu with lots of images or sliders)

const state = vanX.reactive({
    visible: vanX.calc(()=> someCondition === true)
})


//option 1

div(
() => div({
    style: () => (state.visible ? '': hidden)},
    'lots of heavy content here')
)

//or
//option 2

div(
() => state.visible ? div('lots of heavy content here') : div({style:'display:hidden'})
)

[sirenkovladd]

For hiding elements with very complicated content like a scrollable menu with lots of images or sliders, conditional rendering (Option 2) is the more efficient and recommended approach in VanJS and other modern web frameworks. It avoids unnecessary resource consumption by ensuring that the heavy components are only mounted to the DOM when they are actually needed.

@google-gemini

[HEAVYPOLY]

Thanks. I usually go with option 2, but noticed it tends to create detached elements, sometimes duplicates

[Tao-VanJS]

I believe detached elements are subject to GC.