title: React Flow using ref and accessing the HTMLElement
body: <p>Im adding flow to my React project. I followed the instructions in the flow react ref section.</p>
  
  <p>my problem is that Im using the ref object in multiple positions so if I define it as optional I get an error accessing it, otherwise I get an error from the ref itself because its initially null.</p>
  
  <p>is there a solution where I dont need to check each time I want to use the ref? can I tell flow to not run checks on refs?</p>
  
  <p>here is a short snippet to explain what Im doing:</p>
  
  <pre><code>class AudioPlayer extends Component&lt;Props&gt; {
    player: ?HTMLAudioElement;
  
    componentWillUpdate(nextProps) {
      if (nextProps.duration &amp;&amp; this.player.currentTime &gt;= nextProps.duration) {
        this.reset();
      }
    }
  
    render() {
      const { src } = this.props;
  
      return (
        &lt;audio
          className="track-audio"
          ref={audio =&gt; (this.player = audio)}
          loop
          onTimeUpdate={this.handleTimeUpdate}
          onLoadedMetadata={this.handleLoadMetadata}
        &gt;
          &lt;source src={src} /&gt;
        &lt;/audio&gt;
      );
    }
  }
  </code></pre>
  
  <p>considering I dont want to remove the ref, is there an easy solution apart of checking if <code>!isEmpty(this.player)</code> wherever I need it?</p>