When we want to separate data from its presentation so we can support multiple presentations easily.

presenter-pattern.jsx

// from: https://www.zhubert.com/blog/2016/02/05/react-composability-patterns/

const DataGetter = React.createClass({
  render() {
    const { children } = this.props
    const data = [ 1,2,3,4,5 ]
    return children(data)
  }
})

const DataPresenter = React.createClass({
  render() {
    return (
      <DataGetter>
        {data =>
          <ul>
            {data.map((datum) => (
              <li key={datum}>{datum}</li>
            ))}
          </ul>
        }
      </DataGetter>
    )
  }
})

const App = React.createClass({
  render() {
    return (
      <DataPresenter />
    )
  }
})