Edit in JSFiddle

// Returns a Component definition where this.props/state are already set
// in the lifecycle events.
function v2(Component) {
  wrap('componentWillReceiveProps', 'componentDidReceiveProps');
  wrap('shouldComponentUpdate');
  wrap('componentWillUpdate');

  return Component;

  function wrap(dest, source) {
    var inherited = Component[source || dest];
    if (!inherited) return;
  
    Component[dest] = function(nextProps, nextState) {
      var prevProps = this.props;
      var prevState = this.state;
    
      this.props = nextProps;
      if (nextState)
        this.state = nextState;

      var result = inherited.bind(this)(prevProps, prevState);
    
      this.props = prevProps;
      this.state = prevState;
    
      return result;
    }
  }
 };

 var ThingList = React.createClass(v2({
  getDefaultProps: function() {
    return {
      userID: "Joe"
    };
  },
  getInitialState: function () {
    return {
      things: []
    };
  },
  componentWillMount: function() {
    this.loadThings();
  },
  componentDidReceiveProps: function(prevProps) {
    if (this.props.userID !== prevProps.userID)
      this.loadThings();
  },
  render: function() {
    return <p>{JSON.stringify(this.state.things)}</p>
  },
  loadThings: function() {
    // pretend to load based on the User ID
    window.setTimeout(function(){
      this.setState({things: [
        "a: " + this.props.userID,
        "b: " + this.props.userID
      ]})
    }.bind(this), 2000);
  }
}));


var Container = React.createClass({
  getInitialState: function() {
    return { userID: "" };
  },
  render: function() {
    return <div>
      <input type="text" onChange={(e) => {this.setState({userID: e.target.value})}} value={this.state.userID} />
      <ThingList userID={this.state.userID} />
    </div>
  }
});

ReactDOM.render(
  <Container />,
  document.getElementById('container')
);