Recompose as HoC and render prop

hoc-component.jsx

import { compose, withState, withProps } from 'recompose'

function HoCComponent ({a, b, c, setA, setB}) {
  return (
    <div>
      <span>A: {a}</span>
      <button onClick={setA}>Update A</button>
      <span>B: {b}</span>
      <button onClick={setB}>Update B</button>
      <span>C: {c}</span>
    </div>
  )
}

const ComposedComponent = compose(
  withState('a', 'setA'),
  withState('b', 'setB'),
  withProps(({ a, b }) => ({ c: a + b }))
)(HoCComponent)

export default ComposedComponent

render-prop-component.jsx

import { Composer, compose, withState, withProps } from './render-recompose'

/**
 * Assume that `compose` is a high order function that return an object
 * describe what to compose. The Composer component will compute the
 * actual result and provide it via render prop.
 */

const composeFunc = compose(
  withState('a', 'setA'),
  withState('b', 'setB'),
  withProps(({ a, b }) => ({ c: a + b }))
)

function RenderPropComponent ({a, b}) {
  return (
    <Composer compose={composeFunc} a={a} b={b}>
      {({a, b, c, setA, setB}) => (
        <div>
          <span>A: {a}</span>
          <button onClick={setA}>Update A</button>
          <span>B: {b}</span>
          <button onClick={setB}>Update B</button>
          <span>C: {c}</span>
        </div>
      )}
    </Composer>
  )
}

export default RenderPropComponent

render-recompose.js

function Composer ({compose, children, ...props}) {
  return children(compose(props))
}