Title.js

import React from 'react'

// need a getter and a hash of requestId:results or something
// to use in server rendering

let results = []

function updateTitle() {
  document.title = results[results.length - 1]
}

const Title = React.createClass({

  getInitialState() {
    return {
      index: results.push('') - 1
    }
  },

  componentWillUnmount() {
    results.pop()
  },

  componentDidMount: updateTitle,

  componentDidUpdate: updateTitle,

  render() {
    const { render } = this.props
    results[this.state.index] = typeof render === 'function'
      ? render(results[this.state.index - 1] || '')
      : render
    return this.props.children || null
  }

})

export default Title

@jehoshua02 I agree, feels stranger to just have a title floating around somewhere in render though, you can do it either way.

Seems a bit gross to changing document.title within the component. What if you had a updateTitle function in context? That way, App can decide what to do with it. Or even a nested component, such as a panel/modal/card, can have its own title hierarchy.