This Question have 2 answers right now.

Asynchronous call to update state before final render method is called

Question!

Background: I'm trying to use React to update some UI elements based on a json response from some webservice, however because I have a lot of elements to be rendered, I'm trying to lessen bandwidth by only pulling json if an element's HashCode is updated. In the context of my application I cannot update the asynchronous behavior of my ajax calls. What would be the right way to force the update to my elements only after the asynchronous call is completed?
I realize setting state in WillUpdate is wrong.

Example:

    getInitialState: function getInitialState() {
        return { hash: 0, json: {}};
    },

    //Only get the step asJSON if the hash is updated
    shouldComponentUpdate: function(nextProps, nextState) {
        return this.state.json.hash != nextState.json.hash;
    },

    tick: function(){
        this.updateHash();
    },

    updateHash: function updateHash(){
        something.getUpdateHash(function(data){
            var hashR = data.responseJSON;
            this.setState({hash: hashR});
        }.bind(this));
    },

    updateJSON: function(){
        //This is an asynchronous call
        something.getJSON(function(data){
            var stepJ = jQuery.parseJSON(data.responseJSON);
            this.setState({json: stepJ});
        }.bind(this));
    },

    componentWillMount: function(){
        this.updateJSON();
    },

    componentDidMount: function(){
        this.interval = setInterval(this.tick, 10000);
    },

   componentWillUpdate: function(nextState, nextProps){
       //Way to update json state w/o affecting state? 
   },

    render: function render() { 
       /** Only do render after updateJSON is complete **/
   }

By : Chrizt0f


Answers

If I am understanding correctly, you are wanting to update the DOM only if some action (checking hash) happens in the future. I find that pulling that sort of logic out of the container displaying the logic is more helpful and leads to using alot of stateless components which I find far easier to reason about.

// The component that you are housing everything in now
// seconds would be your JSON
const ActualDisplay = ({seconds}) => <div>It has been {seconds} since started</div>

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      seconds: 0
    }
  }
  // This is so we can mimic the future checks
  componentWillMount(){
    let seconds = this.state.seconds
    setInterval(()=>{
      this.maybeUpdate(seconds)
      seconds++
    },1000)
  };
  // This is where you say 'if my hash is different, set state'
  maybeUpdate = (seconds) =>{
    console.log(seconds)
    if(seconds % 10 === 0){
      this.setState({
        seconds
      })
    }
  };

  render() {
    // And because we are updating the state of THIS container
    // we can just say 'Hey, whatever the state is of this, pass it down
    return <ActualDisplay seconds={this.state.seconds} />
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('mount')
)


How about call updateJSON in callback of updateHash

updateHash: function updateHash(){
    something.getUpdateHash(function(data){
        var hashR = data.responseJSON;
        if(hashR!==this.state.hash){
            this.updateJSON(hashR)
        }
    }.bind(this));
},

updateJSON: function(hash){
    //This is an asynchronous call
    something.getJSON(function(data){
        var stepJ = jQuery.parseJSON(data.responseJSON);
        this.setState({json: stepJ,hash});
    }.bind(this));
},
By : Guigui


Video about Asynchronous call to update state before final render method is called