React: hiding vs removing components [closed]

This question is about architecture more than coding.

Here’s the case. In React sometimes we want to hide components. For example, when user opens new page in SPA, when some toast is closed, etc. We can hide them with adding display: none. Or we can remove them from the virtual DOM.

// Hidden div
<div style={{ display: 'none' }}/>

// Removed div
{false && <div/>}

And some of our seniors othen use the first variant. Even if they hide entire page. That’s what they say about this method: “This case React prerenders needed content, so when the content must appear, it takes less time”.

But in this case we can’t use lifecycle hooks, because even when component hides, it’s not removed. But the main problem as I think, is that real DOM becomes gigantic. And that’s brings slowness, isn’t it?

So, what is better?


I didn’t found any conversations about this question. Maybe you could help me.


EDIT 1: Despite the fact there are some answers I’d like to know more opinions. So, I decided to open up a bounty

Answer

Let’s compare some of the differences between these two methods for toggling HTML element visibility, element toggling (aka display: none|block) and JSX short circuit rendering

  1. Simplicity – As you know JSX has been optimised for reactively toggling markup, so it will not print false, true, null and undefined, hence you can write shorter logics in there. Similar case for not using template literals instead of JSX was brought by Facebook https://facebook.github.io/jsx/#why-not-template-literals. Simplicity leads to maintainability, in the long run it will help your app not become another spaghetti nonsense.
  isShown && <div />

vs

 <div style={{ display: isShown ? 'block' : 'none' }} />
  1. Performance – Spanning way more nodes is never good for performance and memory usage, generally it varies per application. It can be benchmarked using Chrome’s Performance Monitor or the React Profiler. But more importantly React builds new performance optimisations around the knowledge that you would follow https://reactjs.org/docs/jsx-in-depth.html rather than using other tricks. Given that some or most of your codebase is using the element toggling approach and there is a new version of React with performance improvements chances are you will probably spend weeks into refactoring to benefit from it.

  2. Bugs – With JSX short circuit rendering you must remember not to use something like elements.length && elements.map(({ text }) => text) as given that the elements array has no members, JSX will print 0 instead of nothing. On the other side setting visibility with display: block almost certainly will lead to flex, inline, inline-block, table elements to be set to block. The second bug is harder to find as you need to deal with css styles or css-in-js.

  3. Consistency – Given that JSX short circuit rendering is the recommended method by the maintainers of React it will be present in most React projects. But say you mix it with the old school display toggling method and any new developers joining the team will question why you are using both. Mixing these will most probably lead to bugs as well where an element might be shown by JSX and in the same time hidden with display: none or vice versa.

  4. Debugging – using React Devtools or Elements while having lots of elements being set to display: none is a nightmare as it will be polluted with nodes that you simply don’t need there

I reckon senior devs are used to toggle elements with display as it is considered old school. It might also be a legacy of converting your app from jQuery to React. It was the only way of making UIs back in the days. Some habits or shall I say mental models are quite sticky. Now days in a React project I will consider the above a hack.

I would advice against using any other way of toggling visibility of markup in React but the standard JSX short circuit rendering isShown && <div />. In my long experience of writing React apps I try to stick to the simplest and most expressive code, that all developers from uni graduates, to juniors, to seniors would expect as per best practices and wouldn’t have trouble reading, so they reuse rather than write the nth version of the same component.

EDIT: As it was mentioned in other answers, transition animations are usually done with react-transition-group package that is only working with JSX short circuit rendering.