ReactJS show loader on child component update -

i have seen lot loader plugins work mount life cycle none update part , wonder how handle it?

what tried following setup parent:

class app extends react.component {   constructor() {       super()       this.state = {loader_wrap:false};       this.hideloader = this.hideloader.bind(this);       this.showloader = this.showloader.bind(this);   }  hideloader(){   this.setstate({loader_wrap: false}); }  showloader() {   this.setstate({loader_wrap: true}); }  render() {   var loaderstyle;   if (this.state.loader_wrap) {     loaderstyle = {display:"block"};   } else {       loaderstyle = {display:"none"};   }  return (         <div>          <div id="content">              {react.cloneelement(content, {                  hideloader: this.hideloader,                  showloader: this.showloader               })}          </div>             <div id="loader-wrap" style={loaderstyle}>                 <img classname="loader hidden-sm hidden-xs" src='source/file/'>             </div>         </div> ) } } 

and child calling methods:

class childextends react.component {  constructor() {     super();     this.state = {results:[]};     this.calculate = this.calculate.bind(this); }  calculate(dict) {         this.props.showloader();          actions.action(dict)           .then(results => {              this.setstate({results: results});           })           .catch((err) => {               var errresp = json.parse(err.response);               console.log(errresp);               this.setstate({responseerrors: errresp});         }); } componentdidmount() {     this.props.hideloader(); } componentdidupdate() {     this.props.hideloader(); }  componentwillreceiveprops(values){    this.setstate({results:values.results}); }  render() {         return (            /*stuff returned*/         ) } } 

i tried use methods .. worked worser :d ideas how implement this? use react flux don't how use in case ..

why not call hideloader() in callback of action's promise?

class childextends react.component {      constructor() {     super();     this.state = {results:[]};     this.calculate = this.calculate.bind(this); }  calculate(dict) {     this.props.showloader();      actions.action(dict)       .then(results => {          this.setstate({results: results});       })       .catch((err) => {           var errresp = json.parse(err.response);           console.log(errresp);           this.setstate({responseerrors: errresp});       })       .then(() => {                      this.props.hideloader();       });  }  render() {     return (        /*stuff returned*/     )   } } 

edit: different approach parent component - rather hiding element style, don't render if isn't required.

render() {   return (     <div>      <div id="content">          {react.cloneelement(content, {              hideloader: this.hideloader,              showloader: this.showloader           })}      </div>       {this.state.loader_wrap &&         <div id="loader-wrap" style={loaderstyle}>             <img classname="loader hidden-sm hidden-xs" src='source/file/'>         </div>      }     </div>   ) }