javascript - How to update data in the React Lifecycle? -

i have question regarding data updates in react lifecycle.

the newstable child component receives props (query) parent component, calls database , renders table. parent send updated props (new queries) table can updated. if parent fires same query twice, table shouldn't update (that is, shouldn't keep hitting database identical queries). now, use shouldcomponentupdate handle this, use "debounce" library.

here's code snippet:

import react 'react';  var newstable = react.createclass({displayname: "newstable",     getdefaultprops: function() {         return {         };     },      getinitialstate: function() {         return {             query: null         };     },      componentwillmount: function() {         this.loaddata(this.props.query);     },      componentdidmount: function() {     },      componentwillunmount: function() {     },      loaddata: function(query) {         // time-consuming async, return "data"         this.setstate({             query: query,             data: data         });     },      componentwillreceiveprops: function(newprops) {     },      shouldcomponentupdate: function(newprops, newstate) {         if (newstate.query != newprops.query) {             return true;         } else {             return false;         }     },      componentwillupdate: function(newprops, newstate) {         this.loaddata(newprops.query);         newstate.query = newprops.query;     },      componentdidupdate: function(oldprops, oldstate) {     },      render: function() {         console.log("newstable -> render");         if (this.props.query != null) {             return <div/>         }     } });  export default newstable; 

here newstable child component receives "query" prop, sends request database, , renders table.

specifically:

1. the incoming prop "query" passed newstable.
2. when component initialized, both getdefaultprops , getinitialstate launched.
3. then componentwillmount function called, fires database request, , calls loaddata function. when request returns database, calls setstate. according docs, here setstate not automatically call render, render called automatically after componentwillmount function. correct place load data database?
4. render called, followed componentdidmount. should put loaddata request in componentdidmount instead, similar docs? http://facebook.github.io/react/tips/initial-ajax.html in case, setstate in componentdidmount call shouldcomponentupdate, , compare query arguments.

now happens when parent component changes query prop?

in case, updated prop calls shouldcomponentupdate -> componentwillupdate -> loaddata -> setstate() -> shouldcomponentupdate ??? it's going infinite loop.

how should best update code snippet handle updated query props, , block repetitive calls?