I realise this is one of those 'it depends', but in general, is it recommended 
to hide elements in react or not render them?

For example, I have an SPA with a bunch of top-level pages. Each page has a 
number of tabs, each tab might be a tree or a table and so on.

I could render the whole thing and hide non-relevant things with 'visible: 
hidden', or I could only render what is actually needed.

I went with the second as it seems 'cleaner' somehow, but it does mean you need 
to track more things:
 - scroll positions of various panels
 - expanded/collapsed state
 - etc.

On the other hand, rendering everything and using the hidden class might 
overwhelm the dom and I am unsure of how expensive a reflow caused by 
showing/hiding compared to replacing the dom.

The general opinion I get from google, stack overflow and react docs is to only 
render what is needed, but nothing definitive.

If it matters, this is a closed intranet with pretty lame PCs, so waiting a 
while for the app to load is fine. Switching between tabs/panels, expanding 
tree nodes etc. should be as quick as possible.

Has anybody done any studies/offer any guidance?

Thanks!

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.

Reply via email to