title: Event listeners and refs in React 16
body: <p>I have an element whose width I want to set equal to the parent both when the element is rendered and when the parent is resized. I'm using the new <code>React.createRef</code> API to achieve this and currently have the following:</p>
  
  <pre><code>class Footer extends Component {
    constructor(props) {
      super(props);
      this.footerRef = React.createRef();
      this.state = { width: 0 };
    }
  
    updateWidth() {
      const width = this.footerRef.current.parentNode.clientWidth;
      this.setState({ width });
    }
  
    componentDidMount() {
      this.updateWidth();
      this.footerRef.current.addEventListener("resize", this.updateWidth);
    }
  
    componentWillUnmount() {
      this.footerRef.current.removeEventListener("resize", this.updateWidth);
    }
  
    render() {
      const { light, setEqualToParentWidth, className, ...props } = this.props;
  
      const style = setEqualToParentWidth
        ? { ...props.style, width: this.state.width }
        : { ...props.style };
  
      return (
        &lt;footer
          {...props}
          ref={this.footerRef}
          style={style}
          data-ut="footer"
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>This seems to compile without any errors and accurately sizes itself on mount. However, once it has mounted, changing the viewport width does not change the width of the footer. Am I attaching the event listener incorrectly? </p>
  
  <p>I also initially tried attaching the event listener to <code>window</code>, but that resulted in <code>TypeError: Cannot read property 'current' of undefined</code> on the first line of <code>updateWidth</code> when I attempted to resize my screen.</p>
  
  <p>How can I fix this?</p>