Can't make `branch` work about recompose

[antoinerey]

I found the solution:

In order to make it work, I had to specify a BaseComponent as last argument of the branch function. Nevertheless, I still don't get why the exemple from the doc works. (I assume that it works).

Does anyone have an explanation ? :)

[wuct]

Because branch returns a function which accepts four arguments. Without providing BaseComponent, what you get is just a function not a React component.

You can use lodash/identity, which is a function arg => arg, to achieve what you expect in a more semantic way.

export default branch(
  props => !!props.title,
  identity,
  renderComponent(Loader)
)(Page)

[antoinerey]

How does that work in this exemple then ? The branch function is not called with 4 arguments.

[mrblueblue]

Just jumping in here: in the end branch is called with the four arguments -- spinnerWhileLoading seems to be a curried branch function. (Please correct if I misunderstood something!)

[wuct]

@mrblueblue you are correct.

In the example:

const Post = spinnerWhileLoading(

  // Here is the fourth argument
  props => props.title && props.author && props.content,

  // Here is a functional component 
  ({ title, author, content }) => (                                           
    <article>
      <h1>{title}</h1>
      <h2>By {author.name}</h2>
      <div>{content}</div>
    </article>
  )
);

[StevenLangbroek]

Yeah I'm having issues getting this to work in compose flow as well:

// This works, but I have to repeat the component to render after loading:
const preload = (test, Component) => branch(
  test,
  renderComponent(Loader),
  renderComponent(Component)
);

export default compose(
  provideHooks(mapHooks),
  reduxForm(mapFormToProps, mapStateToProps, mapDispatchToProps),
  preload(
    (props) => props.isLoading,
    MyComponent
  )
)(MyComponent);

// This doesn't work, moved the Component 1 level down so we get it from `compose`. 
// The weird thing is, I do see the Component class (MyComponent in this case) 
// coming down correctly if I log out the args for the returned function...

const preload = (test) => (Component) => branch(
  test,
  renderComponent(Loader),
  renderComponent(Component)
);

export default compose(
  provideHooks(mapHooks),
  reduxForm(mapFormToProps, mapStateToProps, mapDispatchToProps),
  preload(
    (props) => props.isLoading,
  )
)(MyComponent);

/**
Results in this error:
Invariant Violation: Component(...): A valid React element (or null) must be returned. 
You may have returned undefined, an array or some other invalid object.
*/

What's going on here? Am I missing something?

Update: so I got it working, but this code is very counterintuitive for me. Is this the way to do this?

const preload = (test) => (Component) => branch(
  test,
  renderComponent(Loader),
  renderComponent(Component)
)(Component);

[acdlite]

@StevenLangbroek You don't need the inner function. This will do:

const identity = t => t

const preload = (test) => branch(
  test,
  renderComponent(Loader),
  identity
);

Sounds like the confusion arose from two things:

• It may be unclear to some that the 2nd and 3rd arguments to branch are higher-order components, not components.
• Currying is confusing. We removed it in 0.17.0 for this reason.

Closing this issue, but if you have any other questions, let us know :)