Blocks context propagation

[benvinegar]

The behavior is caused by react-side-effect here (shouldComponentUpdate only does a shallow compare on props, see facebook/react#2517), but the upshot is that using <DocumentTitle/> stops context propagation for a context type declared in its parent but consumed by a descendent.

Totally untested-illustrative-example:

const Parent = React.createClass({
  childContextTypes: {
    foo: React.PropTypes.any
  },
  getChildContext() {
    return { foo: this.state.foo };
  },
  getInitialState() {
    return { foo: null };
  },
  componentDidMount() {
    setTimeout(() => this.setState({foo: 'bar'});
  },
  render() {
    return <DocumentTitle title="sup"><Child/></DocumentTitle/>
  }
});

const Child = React.createClass({
  contextTypes: {
    foo: React.PropTypes.string
  },
  render() {
    // never gets re-rendered with updated `foo` context value
    return <div>{this.context.foo}</div>;
  }
});

I realize that facebook/react#2517 has been discussed to death / is documented clearly in the React Context documentation, but I didn't expect to encounter it in react-document-title (I did not find it in the README).

[benvinegar]

On the off-chance anyone discovers this, my solution was to call forceUpdate directly on the <DocumentTitle/> component from Parent in situations where I knew <DocumentTitle/> would not re-render (context changes).

Implemented here: https://github.com/getsentry/sentry/pull/4559/files

[victor-homyakov]

Any progress on fixing this?

[Kepro]

it's not a problem with this library, it's how React works... also this context API is deprecated