title: React update on window resize
body: <p>I have created a grid with some images and want to update the number of columns on certain widths. 
  For example:</p>
  
  <ul>
  <li>width > 960px: 3 columns</li>
  <li>width > 660px: 2 columns</li>
  <li>width &lt; 660px: 1 column</li>
  </ul>
  
  <p>I've created a function to update the number of rows, but how can I rerender the grid without pressing F5?</p>
  
  <p>My states:</p>
  
  <pre><code>this.state = {
    numberOfColumns: 3,
    breakpointSm: 660px,
    breakpointMd: 960px,
  };
  </code></pre>
  
  <p>My function:</p>
  
  <pre><code>getNumberOfColumns(){
    let smallDevices = window.matchMedia( "(max-width: " + this.state.breakpointSm + ")" );
    let mediumDevices = window.matchMedia( "(max-width:" + this.state.breakpointMd + ")" );
    let columns;
  
    if (smallDevices.matches) {
      columns = 1;
    } else if (mediumDevices.matches){
      columns = 2;
    } else {
      columns = 3;
    }
    this.setState({
      numberOfColumns: columns
    });
  }
  </code></pre>
  
  <p>Component will mount:</p>
  
  <pre><code>componentWillMount() {
    this.getNumberOfColumns();
  }
  </code></pre>