React: hiding vs removing components

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=/>

// 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

from React: hiding vs removing components