How to use the recompose.branch function in recompose

setExpression(exp);
    },
  }),
  expressionLifecycle,
  withPropsOnChange(['formState'], ({ formState }) => ({
    error: (function() {
      try {
        // TODO: We should merge the advanced UI input and this into a single validated expression input.
        fromExpression(formState.expression);
        return null;
      } catch (e) {
        return e.message;
      }
    })(),
  })),
  branch(props => !props.element, renderComponent(ElementNotSelected))
)(Component);

// @flow

import React from 'react';
import { head, get } from 'lodash';
import { compose, branch, renderComponent } from 'recompose';

export default compose(
  branch(
    ({ viewer }) => !get(viewer, 'explore.genes.hits.edges[0]'),
    renderComponent(() =&gt; <div>No gene found.</div>),
  ),
)(({ viewer: { explore } }: Object) =&gt; (
  <span>{head(explore.genes.hits.edges).node.symbol}</span>
));

)}
      validationSchema={yup.object().shape(stepValidation[currentStep])}
    />
  )
}

export default compose(
  wizardWithGQL, // This injects updateManuscript and submitManuscript into the props
  branch(
    props => props.data && (props.data.loading && !props.data.manuscripts),
    renderComponent(Loading),
  ),
  branch(props => !props.data || props.data.error, renderComponent(ErrorPage)),
  branch(
    props => props.data.manuscript.clientStatus !== 'CONTINUE_SUBMISSION',
    () => () => ,
  ),
)(NewSubmissionWizard)

import { compose, branch, renderComponent } from 'recompose';
import PropTypes from 'prop-types';
import { NoDatasource } from './no_datasource';
import { DatasourceComponent } from './datasource_component';

const branches = [
  // rendered when there is no datasource in the expression
  branch(
    ({ datasource, stateDatasource }) => !datasource || !stateDatasource,
    renderComponent(NoDatasource)
  ),
];

export const Datasource = compose(...branches)(DatasourceComponent);

Datasource.propTypes = {
  args: PropTypes.object,
  datasource: PropTypes.object,
  unknownArgs: PropTypes.array,
};

},
    }),
    lifecycle({
        componentDidMount() {
            const {onSelectTheme, themes} = this.props;
            const channel = addons.getChannel();
            channel.on("selectTheme", onSelectTheme);
            channel.emit("setThemes", themes);
        },
        componentWillUnmount() {
            const {onSelectTheme} = this.props;
            const channel = addons.getChannel();
            channel.removeListener("selectTheme", onSelectTheme);
        },
    }),
    branch(
        (props) => !props.theme,
        renderNothing,
    ),
)(BaseComponent);

/**
 * The enhancer.
 *
 * @type {Function}
 */
export const enhance = compose(
	/**
	 * Connect to the Redux store.
	 */
	withStore(),

	/**
	 * Render "No-Options" component when the field doesn't have options.
	 */
	branch(
		/**
		 * Test to see if the "No-Options" should be rendered.
		 */
		({ field: { options } }) => options && options.length,

		/**
		 * Render the actual field.
		 */
		compose(
			/**
			 * Attach the setup hooks.
			 */
			withSetup(),

			/**
			 * Pass some handlers to the component.

const HeritrixStartM = maybeDisplayHError(({serviceRec}) => (
  <p>{serviceRec.heritrixStatusMessage()}</p>
))

const WaybackStartError = ({serviceRec}) =&gt; {
  const {where, message} = serviceRec.getWaybackErrorReport('hStartErReport')
  return (
    <p>
      {nftl.waybackNotStart} <br>
      {where} : {message}
    </p>
  )
}

const maybeDisplayWError = branch(
  props =&gt; props.serviceRec.get('wError'),
  renderComponent(WaybackStartError)
)

const WaybackStartM = maybeDisplayWError(({serviceRec}) =&gt; (
  <p>{serviceRec.waybackStatusMessage()}</p>
))

const updateWhen = (props, nextProps) =&gt; props.step === 0 || nextProps.step === 0

const enhance = shouldUpdate(updateWhen)

const ServiceCheckMessage = enhance(({serviceRec}) =&gt; (
  

import SparkMeterWithTooltip from '@ncigdc/components/SparkMeterWithTooltip';
import SampleSize from '@ncigdc/components/SampleSize';

const colors20 = scaleOrdinal(schemeCategory20);

const styles = {
  coloredSquare: {
    display: 'inline-block',
    width: 10,
    height: 10,
    marginRight: 5,
  },
};

export default compose(
  branch(
    ({ viewer }) => !viewer.projects.hits.edges[0],
    renderComponent(() =&gt; <div>No project found.</div>),
  ),
)(({ viewer: { projects: { hits: { edges } } }, query, push }) =&gt; {
  const project = edges[0].node;
  const totalFiles = project.summary.file_count;
  const totalCases = project.summary.case_count;

  const dataCategories = Object.keys(DATA_CATEGORIES).reduce((acc, key) =&gt; {
    const type = project.summary.data_categories.find(
      item =&gt; item.data_category === DATA_CATEGORIES[key].full,
    );
    return acc.concat(
      type
        ? {
            ...type,