title: reactjs setState before render on update
body: <p>I have a react component and the requirement is to setState before render on update (url hash change). Below is code snippet:</p>
  
  <pre><code>componentConfig: function() {
     .....
     this.setState({rows: rows});  
     this.setState({loadMoreBtn: loadMoreIsVisible})
  },   
  </code></pre>
  
  <p>I was it working before, I was calling this method from <code>getInitialState</code> and it was working fine. <code>getInitialState</code> fires only once so I was not able to update it on url change. I tried various other inbuilt update methods such as <code>componentWillReceiveProps</code> but they are one step behind. Seems like render happens before this method gets called. I also tried to call it from <code>render</code> but obviously states get confused and it breaks.</p>
  
  <p><a href="https://i.stack.imgur.com/mMw2s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mMw2s.png" alt="enter image description here"></a></p>
  
  <p>As this image demonstrates, <code>componentRillReceiveProps</code> always behind render. I need something that fires before render each time on url update. Hope it makes sense.   </p>
  
  <p>or in other words, I would like to fire <code>getInitialState</code> on hash change.  </p>
  
  <pre><code>   var React = require('react'),
      projectsData = require('./../projects'),
      ProjectsRow = require('./projects_row'),
      itemsInRow = 3,
      noOfDefaultRows = 2,
      projects = [],
      currentProjects = [],
      currentPageRows,
      currentParamKey;
  
  var Projects = React.createClass({
  
      componentWillMount: function() {
          this.componentConfig(this.props);
      }, 
  
      componentWillReceiveProps: function(nextProps){
          this.componentConfig(nextProps);
      },
  
      componentConfig: function(props) {
          var rows = [],
              currentParamKey = 'projects',
              loadMoreIsVisible = true,
              i; 
  
          if(props.params.key) {
              currentParamKey = props.params.key;
          }   
  
          projects = projectsData.getByKey(currentParamKey);      
          projectsData.currentState[currentParamKey] = noOfDefaultRows;       
          currentProjects = projects.slice(); //Create a copy or array 
          noOfDefaultRows = projectsData.currentState[currentParamKey] || noOfDefaultRows;    
  
          for (i = 0; i &lt; noOfDefaultRows; i++) {
              if(currentProjects.length) {
                  rows.push(currentProjects.splice(0, itemsInRow));
              } 
          }  
  
          currentProjects.length ? loadMoreIsVisible = true : loadMoreIsVisible = false;
  
          this.setState({rows: rows});  
          this.setState({loadMoreBtn: loadMoreIsVisible})
  
          console.log('Finished executing componentConfig and currentParamKey = ' ,currentParamKey);
      },
  
      loadMoreProjects: function(e) {
  
          e.preventDefault();
          var addRow = this.state.rows;
  
          if(currentProjects.length) {
              currentPageRows++;
              addRow.push(currentProjects.splice(0, itemsInRow));
              this.setState({rows: addRow});  
          } 
  
          if(!currentProjects.length) {
              this.setState({loadMoreBtn: false})
          }   
      },
  
      render: function() {
  
          console.log('Now in render and currentParamKey = ' ,currentParamKey);
  
          var projectUrl;
  
          //currentParamKey = this.props.params.key;
  
          if(currentParamKey === 'projects') {
              projectUrl = '#/project';
          } else {
              projectUrl = '#/project/' + currentParamKey
          }   
  
          return (
              &lt; div className="projects"&gt;
                  &lt; div className = "jumbotron" &gt;
                      &lt; div className = "container" &gt;
                          &lt; h1 &gt; Projects &lt; /h1&gt; 
                      &lt; /div&gt; 
                  &lt; /div&gt;
  
                  &lt; div className = "container" &gt;
  
                      {this.state.rows.map(function(row, i) {
                          return &lt;ProjectsRow url={projectUrl} row={row} key={i} /&gt;
                      }.bind(this))}
  
                  &lt; /div&gt; 
  
                  &lt; div className = "container text-center" &gt; 
                      &lt;a id="loadMore" className= {this.state.loadMoreBtn ? 'linkStyle1' : 'hide'} 
                          onClick = {this.loadMoreProjects}
                          role="button" &gt; &lt;i className="fa fa-angle-down"&gt;&lt;/i&gt;&lt;span&gt;Load More Projects&lt;/span&gt; 
                      &lt;/a&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
  
                      &lt;div className="contact-me-link"&gt;
                          &lt;a className="linkStyle1" href="#/contact"&gt;
                              &lt;i className="fa fa-angle-right"&gt;&lt;/i&gt;&lt;span&gt;Contact&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt; /div&gt;
          );  
      }
  });
  
  module.exports = Projects;
  </code></pre>