getChildContext() is called before getInitialState()

[andreypopp]

I think it's a bug because it prevents child context from being dependent on component state.

var React = require('react');

var contextTypes = {
  name: React.PropTypes.string
};

class Test extends React.Component {

  getInitialState() {
    return {name: 'Name'};
  }

  getChildContext() {
    return {name: this.state.name};
  }

  render() {
    return <div />;
  }
}
Test.childContextTypes = contextTypes;

console.log(React.renderToString(<Test />));

Results in:

    return {name: this.state.name};
                            ^
TypeError: Cannot read property 'name' of null
    at Test.getChildContext ([stdin]:19082:29)
    at assign._processChildContext ([stdin]:6850:53)
    at assign._renderValidatedComponent ([stdin]:7249:33)
    at wrapper [as _renderValidatedComponent] ([stdin]:13368:21)
    at assign.mountComponent ([stdin]:6558:32)
    at wrapper [as mountComponent] ([stdin]:13368:21)
    at [stdin]:14177:27
    at ReactServerRenderingTransaction.Mixin.perform ([stdin]:16220:20)
    at Object.renderToString ([stdin]:14174:24)
    at Object.react ([stdin]:19092:19)

[gaearon]

This kept me curious for a while.

At what point does React read getChildContext?

If it references this.props and this.state, does that mean that context change has to propagate after componentDidUpdate, thus forcing reconciliation twice?

Somewhat related: #2517

[andreypopp]

The correct way to define component state in terms of modern API:

var React = require('react');

var contextTypes = {
  name: React.PropTypes.string
};

class Test extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.state = {name: 'Name!'};
  }

  getChildContext() {
    return {name: this.state.name};
  }

  render() {
    return <div />;
  }
}
Test.childContextTypes = contextTypes;

console.log(React.renderToString(<Test />));

Now that works, sorry.