Problems from swapping components

[joshkel]

We're running into problems because we're trying to replace one with another within a single update. The new 's componentWillMount triggers before the old one's componentWillUnmount, resulting in a spurious "Only a single Gateway can be rendered at a time into a GatewayDest" warning, followed by the older gateway's componentWillUnmount removing the new gateway's children (because GatewayRegistry.removeChild doesn't care whose children it's removing).

One solution is to add or restore support for multiple children (see #15 or briteback/react-gateway).

[joshkel]

Sample code (not specific to react-gateway) that demonstrates via console.log how a new component's componentWillMount can trigger before the old component's componentWillUnmount:

class Button extends React.Component {
  componentWillMount() {
    console.log('mount ' + this.props.id);
  }
  componentWillUnmount() {
    console.log('unmount ' + this.props.id);
  }
  render() {
    const { id, onClick } = this.props;
    return <button id={id} onClick={onClick}>{id}</button>;
  }
}

class AppComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = { first: true };
  }

  render() {
    const { first } = this.state;
    return (
      <div className="index">
          {first && <Button id="first" onClick={() => this.setState({first: false})}/>}
          {!first && <Button id="second" onClick={() => this.setState({first: true})}/>}
      </div>
    );
  }
}