Unmount, or hide in React?

Question

What's more efficient? Should I mount and unmount components, or show and hide them with css?

The practical case where this has come up for me is with Modals. I can either keep the Modal's 'active' state in its parent component, and pass it along as a prop to the Modal which then maybe applies className 'active'. Or, I could have a modal 'navigator' that determines which modal to display, and its reference gets passed around to other components.

Answer 1

It's a matter of preference, but I always return null if I don't need an item to be visible.

The main reason is that if you're doing server-side rendering, and you have a few hundred lines of HTML that is 'hidden' but still gets rendered, then you're sending a lot of unnecessary data over the wire.

A modal 'navigator' (or 'conductor' below) would sit as the last child at the top of your DOM tree and return the appropriate modal or null:

import React from 'react';

import ExportDataModal from './ExportDataModal.jsx';
import SignInModal from './SignInModal.jsx';
import FeedbackModal from './FeedbackModal.jsx';
import BoxDetailsModal from './BoxDetailsModal.jsx';

const ModalConductor = props => {
  switch (props.currentModal) {
    case 'EXPORT_DATA':
      return <ExportDataModal {...props}/>;

    case 'SOCIAL_SIGN_IN':
      return <SignInModal {...props}/>;

    case 'FEEDBACK':
      return <FeedbackModal {...props}/>;

    case 'EDIT_BOX':
      return <BoxDetailsModal {...props}/>;

    default:
      return null;
  }
};

export default ModalConductor;

Here's an article that goes into a bit of detail about Modals in React.