Make branch return a stateless functional component

[matthieuprat]

Not sure you would want to merge this but at least, I will learn something out of the discussion!

Currently, branch returns a full-fledged React component. I am wondering whether it could return a stateless functional component instead (which is interesting because the component could be eagerly rendered).

That would essentially mean that we would be fine with factories being (lazily) initialized in render instead of the component's constructor and the willComponentReceiveProps hook—is it the case?

[istarkov]

For now branch could be used as

branch(
   testFn,
   compose(
      Hoc0,
      ...,
      HocN,
   ),
   compose(
      AnotherHoc0,
      ...,
      AnotherHocN,
   ),
)

so in it's base it allows to branch enhancers, no need to return React.Component

[matthieuprat]

Very true.

I'm not talking about branch's parameters though, but its return value.

Currently, the branch HoC returns a class component—which is never referentially transparent and which cannot be eagerly rendered as a result.

My proposed changed is about modifying branch's implementation to return a stateless, referentially transparent, functional component. This way, it may be eagerly rendered.

[matthieuprat]

I bet we could do the same for withHandlers by the way. If this PR is accepted, I will be happy to submit another one for withHandlers.

Edit: I might have been a little too optimistic :)
After giving it a second thought, I can't figure out how we could make withHandlers return a SFC and keep handlers immutability at the same time.

[istarkov]

Got it, like it, let us think a little

[istarkov]

I see no issues with this PR, I like it more than current version @wuct @acdlite ?

[wuct]

I don't see any issue either. I like functional stateless components :)

[istarkov]

Thank you!!! So nice to see such changes!

[matthieuprat]

Thank you for your responsiveness!

Side note: the new implementation will only ever call the left and right arguments at most once (whereas the former implementation called them (at most) once per instance).

I see that as a feature rather than a bug but it's worth noting that if the left and right arguments are not pure functions, branch may behave strangely.

Here is a test to illustrate that:

test('left argument is called at most once', t => {
  let i = 0
  const impureHoC = _ => {
    i++
    return _ => <div>{i}</div>
  }

  const BranchedComponent = branch(
    _ => true,
    impureHoC
  )(_ => null)

  t.is(0, i)

  mount(<BranchedComponent />)
  t.is(1, i)

  mount(<BranchedComponent />)
  t.is(1, i)
})

The new implementation would pass this test. The former would fail on the last assertion.