title: Reactjs Life Cycle Function Rendering Twice
body: <p>I have a question about the mechanics of <code>componentDidMount</code>. I'm building out a weather app that uses an external api to get forecast data for a city.</p>
  
  <p>My Forecast Container is built like this</p>
  
  <pre><code>var React = require('react');
  var Forecast = require('../components/Forecast');
  var weatherHelpers = require('../utils/weather');
  
  var ForecastContainer = React.createClass({
    getInitialState: function(){
      return {
        isLoading: true,
        forecastData: {}
      }
    },
  
    componentDidMount: function(){
      weatherHelpers.getCityForecast(this.props.routeParams.city)
      .then(function(results){
        this.setState({
          isLoading: false,
          forecastData: results
        })
      }.bind(this))
    },
  
    render: function() {
      return (
        &lt;Forecast
          city={this.props.routeParams.city}
          isLoading={this.state.isLoading}
          forecastData={this.state.forecastData}
        /&gt;
        )
    }
  });
  
  module.exports = ForecastContainer;
  </code></pre>
  
  <p>I'm using axios to send an http get request to the weather api and storing the functionality inside a helper file called weatherHelpers.</p>
  
  <pre><code>function Forecast(props) {
    console.log(props)
    return (
      &lt;div style={styles.container}&gt;Forecast component&lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>When I log props from my Forecast component, it is logged twice. Once with the initial state and again with the updated state. Is this just state life operates: a lag between initial state and running instructions inside componentDidMount? Is there a re-rendering of my component (hence the two console logs). If so, what is the mechanism that is at work. How is the component listening to it's state?</p>