title: React Component - reload data within multiple times
body: <p>Imagine a simple React component with <code>&lt;select&gt;</code> element that allows to choose a city based on country. For example</p>
  
  <pre><code>&lt;MyCitySelectComponent
    country={ 'France' }
    city={ 'Paris' }
    onChange={ someFunction }
  /&gt;
  </code></pre>
  
  <ul>
  <li>When mounted, it should load list of available Cities (based on Country) and render <code>&lt;select&gt;</code>.</li>
  <li>When city property is changed - it should modify <code>&lt;select&gt;</code> input value and trigger onChange event.</li>
  <li>When country property is changed (from parent component) - it should reload list of available cities from a remote server and trigger the same onChange event.</li>
  </ul>
  
  <p>I managed to implement first two, here is simplified code:</p>
  
  <hr>
  
  <pre><code>class MyCitySelectComponent extends Component {
      constructor(props) {
          super(...props);
  
          this.state = {
              cities: null,
              city: props.city,
              country: props.country
          };
      }
  
      onCityChange( e ) {
          this.setState({
              city: e.target.value
          });
  
          this.props.onChange( e.target.value );
      }
  
      loadCities() {
          fetch({
              path: '/get/cities?country=' + this.state.country,
          }).then( cities =&gt; {
              this.setState({
                  cities: cities
              });
          });
      }
  
      componentDidMount() {
          this.loadCities();
      }
  
      render() {
          if ( !this.state.cities ) {
              // not loaded yet
              return null;
          }
  
          return (
              &lt;select&gt;
                  { this.state.cities.map( ( name, index ) =&gt;
                      &lt;option
                          value={ name }
                          onChange={ this.onCityChange }
                          selected={ name === this.state.city }
                      /&gt;
                  ) }
              &lt;/select&gt;
          )
      }
  }
  </code></pre>
  
  <p>But I'm having trouble reloading cities when country is changed dynamically from parent component. I tried using <code>shouldComponentUpdate</code>, but all I get is infinite loops.</p>
  
  <p>Is there any pattern for such type of component?</p>
  
  <p>Thank you.</p>