title: (react) Listening to dropdown/select value changes triggered by changed data list propagated as props
body: <p>I am using a simple HTML select dropdown and controlling it with react (==> controlled component). Everything fine so far. The Problem is - the select options are updated via an async ajax call every few seconds and empty at the beginning. The selects data list is propagated via props. </p>
  
  <p>So, the select data list changes, the selected options list changes - but no change is fired (afaik by design of react). 
  I have found a working way to listen for these changes by listening to "componentDidUpdate" and firing a onChange "by hand" by reading out the value of the select as reference - but this seems very "un react-ish" (code below). Does anyone know the "react" way to do this? </p>
  
  <p>Full code:</p>
  
  <pre><code>class Dropdown extends React.Component {
      constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
          this.dropDown = React.createRef();      
      }
  
      handleChange(event) {
          if (this.props.onChange) this.props.onChange(event.target.value);
      }
  
      componentDidUpdate(prevProps) {
          if (this.props.options.length != prevProps.options.length) {
              if (this.props.onChange) this.props.onChange(this.dropDown.current.value);
          } else {
              for (let i = 0; i &lt; this.props.options.length; i++) {
                  if (this.props.options.value != prevProps.options.value) {
                      if (this.props.onChange) this.props.onChange(this.dropDown.current.value);
                      return;
                  }
              }
          }
      }
  
      render() {
          const optionList = this.props.options.map(option =&gt; &lt;option value={option.value} key={option.value}&gt;{option.name}&lt;/option&gt;);
          return &lt;select value={this.props.value} onChange={this.handleChange} ref={this.dropDown}&gt;{optionList}&lt;/select&gt;;
      }
  }
  </code></pre>
  
  <p>props.options start as empty list. Some parent node holds this list as a state and updates it every few seconds with a ajax request. </p>
  
  <p>Sandbox code: <a href="https://codesandbox.io/s/6l927kpx13" rel="nofollow noreferrer">https://codesandbox.io/s/6l927kpx13</a></p>