I've searched around and after reading some stuff, I still didn't get when I use repose branch over if-else statement in react or why even use it? can anyone mention a good source or explain it? thanks

I've searched around and after reading some stuff, I still didn't get when I use repose branch over if-else statement in react or why even use it? can anyone mention a good source or explain it? thanks

• javascript
• reactjs
• repose

3 Answers 3

It can be used instead of if..else or ternary operator where function position is preferred. Repose provides function position for React ponents. As other Repose higher-order ponents, branch HOC can be posed with pose:

const fooPredicate = ({ type }) => (type === 'foo');
const FooHOC = Comp => props => <Comp ...props>Foo</Comp>;
const BarHOC = Comp => props => <Comp ...props type="bar">Bar</Comp>;
const FooOrBarHOC = branch(fooPredicate, FooHOC, BarHOC);
const SomeHOC = pose(BazHOC, FooOrBarHOC);
const SomeExampleComponent = SomeHOC(ExampleComponent);

All functions involved in SomeExampleComponent are reusable and can be tested and used separately from each other.

In case the case is simple and these functions aren't expected to be used with any ponent except ExampleComponent, it can be simplified to:

const SomeExampleComponent = BazHOC(props => (
  props.type === 'foo'
  ? <ExampleComponent ...props>Foo</ExampleComponent>
  : <ExampleComponent ...props type="bar">Bar</ExampleComponent>
));

branch from repose is one of the best way to avoid if-else in your ponents

branch(
   condition,
   leftHOC,
   rightHOC
)(MyComponent)

if the condition evaluates to true then

MyComponent is passed to the leftHOC else it is passed to the rightHOC

Suppose you have to show a loading state till the time data is not available then we can also use renderComponent from repose

branch(
   props=>props.loading,
   renderComponent(Loader),
   myComponent=>myComponent,
)(MyComponent)

While Estus answer is good enough and answered how used instead of if..else or ternary operator, I like to mention one another of use cases of branch that we using in our project, when we want to render a ponent within another ponent based on some conditions with help of renderComponent() which is useful in bination with branch() ( In our project Usually we use it to render dumb ponents, modals ponents , etc )

branch<WrappedProps>(
  props => props.success,
  renderComponent(ShowSuccessModal)
)

So in this example whenever props.success in our container became true, the modal ponent will rendered.