reactjs - tips for moving logic out of componentDidUpdate -

i have redux connected component , using componentdidupdate lot of logic , starting messy.

my componentdidupdate looks bit this:

  componentdidupdate(prevprops: props) {     if (this.props === prevprops) {       return;     }      const {       history,       a,       b,       c     } = this.props;      if (!prevprops.a && !a) {       this.proceedtonextstep();       return;     }      if (b.length === b.length + 1) {       history.push(rooturl);       return;     }      if (c != prevprops.c) {       // stuff       return;     }   } 

the props change due redux actions don't know better place determine has changed in redux connected component.

this perhaps wrong 1 property more logic appearing in here , messy.

you can put logic in:

• componentwillreceiveprops(nextprops): @ least avoid componenent re-rendering before execute component logic. newprops contains props injected redux connect
• mapstatetoprops: redux connect third parameter callback sent merged props: (state props + dispatch props + own component props)
• observables wrapped in redux promise: me best option handle logic because doesn't involve react components: can chain js logic (with observables) and, @ each step of logic execution, can trigger dispatch() , access application redux state. redux-observable module mixes both rxjs module (observables) , redux promise module (redux promise) easier uses.