react - performance difference between hiding or removing elements?

[Colin Yates]

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!

[Khalid Jebbari]

I've seen a talk wednesday by a guy specialised in Web Perf. He clearly stated that BIG DOM makes stuff slow. I would definitely not render them. Hiding/showing should be reserved for small parts of a component, i.e. an error message in a form.

[Khalid Jebbari]

By the way, he developped a nice tool (and open-sourced it!) to measure perf based on a lot of criteria : http://yellowlab.tools/

[Colin Yates]

Thanks Khalid.

On 27 March 2015 at 14:05, Khalid Jebbari <khalid....@gmail.com> wrote:
> By the way, he developped a nice tool (and open-sourced it!) to measure perf based on a lot of criteria : http://yellowlab.tools/
>

> --
> 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 clojurescrip...@googlegroups.com.
> To post to this group, send email to clojur...@googlegroups.com.
> Visit this group at http://groups.google.com/group/clojurescript.