React: Performance for Unmounting & Mounting a component vs hiding it

[Robert-W]

Is there a preferred method or performance benefit to hiding a node in the dom via css vs mounting and unmounting it?

For example, I have a render function with the following code:

const {map} = this.context;
let selectedFeature;
let content;

//- Infer the selected feature from the info window
if (map.infoWindow && map.infoWindow.getSelectedFeature()) {
  selectedFeature = map.infoWindow.getSelectedFeature();
}

if (selectedFeature !== undefined) {
  content = [<Analysis selectedFeature={selectedFeature} />];
} else {
  content = [<Instructions />, <Tools />];
}

return (
  <div className='analysis-panel custom-scroll'>
    {content}
  </div>
);

and I am wondering is this is preferred over something like this:

return (
  <div className='analysis-panel custom-scroll'>
    <div className={`${selectedFeature === undefined : 'hidden' : ''}`}>
        <Analysis selectedFeature={selectedFeature} />
    </div>
    <div className={`${selectedFeature === undefined : '' : 'hidden'}`}>
        <Instructions />
        <Tools />
    </div>
  </div>
);

The first snippet mounts and unmounts the node, and I feel this is cleaner in the Analysis component since I know selectedFeature will always be defined and I don't need any conditional code in this snippet or the Analysis component. But this can change very frequently in the application so I was wondering if one method is preferred or more performant over the other? (If performance is the same I will probably go with the first snippet as it feels cleaner to me and Im guaranteed to have a value for selectedFeature)

[jimfb]

Hiding via CSS is slightly faster, but it has the downside that it means your dom/react tree is bigger, which means your reconciliations are bigger (slower) and your app is using more memory - even when the tree is not visible. If you can't tell the difference between the two, in terms of performance, we would recommend unmounting (since then you're cleaning up your memory and keeping your tree small).

Ultimately, this is a usage question, rather than a bug in the React core. Usage questions are better answered on sites like StackOverflow, as we try to use github issues for tracking bugs in the React core. For this reason, I'm going to close out this issue, which takes it off our radar, but feel free to continue the conversation here (or move it to StackOverflow).

[Robert-W]

Thanks for the response and recommendation. I can't notice the difference in performance yet since the app is still relatively small so I'll go the unmount route, but this was just something I wanted to make sure I had figured out before going further.

Apologies on posting this in the wrong place, will keep that in mind for future questions.