Visibility vs. mounted/unmounted

UI Builder
8

Hi guys

when changing display=false (visibility=false) for a ComponentA it still stays mounted and you have access to the component to be able to set display=true

However, it stops rendering its children (UI elements and other inner components), for instance, if your ComponentA is a Text component you won’t see any text on the Page. And the component is still in the memory (mounted) and you can use logic to modify it.

In case your ComponentA is a container (for instance Block) and it contains other component Text/Buttom/Input/etc and setting display=false and it stops rendering its children all the inner components will be unmounted

ComponentA (Block) `display=false`: // it's mounted but doesn't render any UI
  - Text: // it's unmounted and you do not have access to the component in logic

The main idea of the approach is to be able to:

  • when hiding a component keeps a reference to the component and its state
  • when hiding a component unmount unnecessary children components to release memory and improve performance
  • in case you need to just hide a component but keep children states you can use the CSS property display:none

Regards,
Vlad

1 Like