Keep a React component mounted in Split

[sytolk]

Hi, I have use Split with 2 heavy components with conditional rendering. Something like:

const entryContainer = (<EntryContainer key="EntryContainerID" />);
const folderContainer = (<FolderContainer key="FolderContainerID" />);

// There is only entryContainer displayed here (its not need split)
      if (props.isEntryInFullWidth) {
        return entryContainer;
      }

   return (
        <Split
          initialPrimarySize={mainSplitSize}
          minPrimarySize="250px"
          minSecondarySize="250px"
        >
{folderContainer}
{entryContainer}
      </Split>

In this case if props.isEntryInFullWidth is changed React will unmount entryContainer component: https://medium.com/@cowi4030/optimizing-conditional-rendering-in-react-3fee6b197a20
The only way to optimize rendering is to have on Split props: displayPrimary and displaySecondary in my case:

return (
        <Split
          initialPrimarySize={mainSplitSize}
          minPrimarySize="250px"
          minSecondarySize="250px"
         displayPrimary={!props.isEntryInFullWidth}
        >
{folderContainer}
{entryContainer}
      </Split>

This will render the same like this:

if (props.isEntryInFullWidth) {
        return entryContainer;
}

here: https://github.com/GeoffCox/react-splitter/blob/master/package/src/Split.tsx#L201

The main goal is to skip double entryContainer in JSX in order to not unmount this component on next rerendering.

[GeoffCox]

You should be able to manage the mount/unmount of components using the onSplitChanged event. When primary or secondary are 100% you would know it is in full width. If your components are heavy, consider using React.memo to reduce needing to re-render them too often.