Q:

Which is right timing to get URL

I want to get a key from server at page initial and use this key to get data in other component. 
var Page = React.createClass({
    getInitialState: function () {
        var key = this.getKey();
        return { key: key };
    },   
    getKey: function () {
        var key;
        $.ajax({
            url: Api. GetMasterkey,
            dataType: 'json',
            data: {
                urlParamter:''
            },
            async: false,
            success: function (data) {
                key = data;
            }.bind(this),
        });

        return key;
    },
    render: function () {
        return (
             <div>
                <ContentA key={this.key} />
                <ContentB key={this.key} />                
             </div>
        );
    }
});

module.exports = Page;

The key's value depends on urlPagramter.  I try to parse url in getKey function but I find the url shows timing is after getInitialState.  
So, which timing is right to get url pagramter?  If my design is wrong please feel free to correct it. 

A:

First off, this is slightly off topic, but bear with me: Don't call your prop key in ContentA and ContentB. It is a reserved prop name for the inner mechanics of React to generate a react-id, and unless that's the purpose, call it something else.  Besides, referring to this.key makes no sense.  It would be this.state.key 
By definition the Ajax operation i async, so key will always be undefined when it is returned from getKey.  If you really must have key before the page is rendered for the first time, then you have to do your API call before rendering anything with React.  Imagine you have an index.js or some other point of entry for you app, this is usually the same place where you call ReactDOM.render().  In this top level file, do the API call
$.ajax({
        url: Api. GetMasterkey,
        dataType: 'json',
        data: {
            urlParamter:''
        },
        async: false,
        success: function (data) {
            /* This function is executed when data is received.  Run ReactDOM.render from here, and pass data as a prop. */ 
        }
    });

In Page, now it is simply a matter of setting the inital state using the passed prop. 
getInitialState: function() {
  return {
    key: this.props.data // or whatever you call your prop
  };
}

A different approach, if ContentA and ContentB can handle being without a key for a moment, is doing the Ajax call in Page's componentDidMount function, and call setState when the success function is called in the ajax function. 
var Page = React.createClass({
  ...
  ...
  componentDidMount(){
    // Do Ajax stuff after the component has mounted
    var that = this;
    $.ajax({
        url: Api. GetMasterkey,
        dataType: 'json',
        data: {
            urlParamter:''
        },
        async: false,
        success: function (data) {
            // Change state after the data has been received. 
            that.setState({
                key: data
            });
        }
    });
  }
  ...
  ...
  ...
})

Now the render function will trigger again as soon as the reply from the Api is ready, and ComponentA and ComponentB can make use of the key by referring to this.state.key.