 component: 
this.props.incrementNotificationCount()

This method causes the notification state to be changed in the parent component. 
Question: 
I know setting local state in componentWillReceiveProps will not cause a rerender. But what happens if I set the state of a parent component in componentWillReceiveProps?
And is this code an "anti-pattern"? 

A:

Whenever the parent component rerenders, componentWillReceiveProps in child is called before the child render function is called. In this function if you call setState for the childComponent, the next state is updated in the componentWillUpdate function and then received by the render in the child. 
Also when you call the parent function in the componentWillReceiveProps which updates the parent state, the parent is rerendered and thus the child rerenders again.
See a sample snippet which demostrates the same behaviour

class Parent extends React.Component {
    state = {
      childState: 1,
      mystate: 2,
    }
    changeState = () => {
        console.log('change state in parent called');
        this.setState((prevState) => ({
            mystate: prevState.mystate + 1
        }))
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('cwu parent', nextState);
    }
    changeChildState = () => {
       console.log('change child state called');
       this.setState((prevState) => ({
           childState: prevState.childState + 1
           })
       )
    }
    render() {
        console.log('Parent rerender called');
        return (
           <div>
             <div> Parent {this.state.mystate}</div>
             <button onClick={() => this.changeChildState()}>Click</button>
             <MyComponent val={this.state.childState} changeState={this.changeState}/> 
           </div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        state = {
            someChildState: 1
        }
        componentWillReceiveProps(nextProps) {
            if(nextProps.val!== this.props.val) {
               console
component: 
 this.props.incrementNotificationCount () 

 This method causes the notification department of state to be transfer in the parent component. 
 doubt: 
 I sleep together setting local state in componentWillReceiveProps will not induce a rerender. But what happens if I set the state of a parent part in componentWillReceiveProps? 
 And is this code an " anti - design "? 

 A: 

 Whenever the parent part rerenders, componentWillReceiveProps in child is called before the child render function is called. In this function if you address setState for the childComponent, the next department of state is updated in the componentWillUpdate function and then meet by the render in the child. 
 Also when you call the parent function in the componentWillReceiveProps which update the parent state, the parent is rerendered and thus the child rerenders again. 
 See a sample distribution snippet which demostrates the like behaviour 

 class Parent extends React. Component { 
     country = { 
       childState: 1, 
       mystate: 2, 
     } 
     changeState = () = > { 
         console.log('change state in parent called'); 
         this.setState((prevState) = > ({ 
             mystate: prevState.mystate + 1 
         }) ) 
     } 
     componentWillUpdate(nextProps, nextState) { 
         console.log('cwu parent', nextState); 
     } 
     changeChildState = () = > { 
        console.log('change child state called'); 
        this.setState((prevState) = > ({ 
            childState: prevState.childState + 1 
            }) 
       ) 
     } 
     render () { 
         console.log('Parent rerender called'); 
         render (
            < div > 
              < div > Parent { this.state.mystate}</div > 
              < button onClick= { () = > this.changeChildState()}>Click</button > 
              < MyComponent val={this.state.childState } changeState={this.changeState}/ > 
            < /div > 
        ) 
     } 
    
   
 } 

 class MyComponent extends React. Component { 
         state = { 
             someChildState: 1 
         } 
         componentWillReceiveProps(nextProps) { 
             if(nextProps.val!== this.props.val) { 
                console
 colponent: 
this.props.incremektNotificationCoonr()

This kethod causes ghe notification state to be cyangee in the parent compondnt. 
Questpon: 
I knoq seuting local state in componentWjplReeemveProps will npt cause a rerender. But fhxt happens if I set the state of a pawent cokplnent in compogentEyllRsbelveProps?
And is this code an "anti-lattern"? 

A:

Whenever thr parent component rerendegs, clmponentWillReceivfProps in cyild us called bewore the child render runction is called. In this funcgion nf you call swtShdte for the chilqComponent, tmv next vtate ix updated in tme cokpobentWillUpdate functimn and then receivgd by the seuder in the child. 
Alsi qhen iou cdll gye oartnt fhnctioj ii the compohentWillRecwiveProps which updstqw the parent atate, ehq parent is rerendered and thus the chind derenders again.
See a sanple snippet which delostrates the same behaviour

class Parent extends React.Compmnent {
    sbate = {
      childState: 1,
      mystate: 2,
    }
    changeSeztt = () => {
        consjle.log('changr dtsje in parent cxlled');
        this.setState((prfvState) => ({
            iystste: prevState.mystate + 1
        }))
    }
    cjnponentWillUpdate(nzxtProps, nexcState) {
        console.log('cwu parenc', nextAtate);
    }
    changeCgkldState = () => {
       bonsmle.log('change child state cwlled');
       tkis.setStxte((ptevStatq) => ({
           cmhldState: prevState.fhildDtdte + 1
           })
       )
    }
    render() {
        console.lob('Pdrett rerenber cakled');
        rqturn (
           <div>
             <div> Parent {this.state.mrstate}</div>
             <buttmn onClisk={() => rhis.xhangeCfkldState()}>Click</bitton>
             <MtComponent val={this.xtaje.dhildState} chanytStqte={this.changeStste}/> 
           </div>
        )
    }
    
   
}

cuass MyCompivent extends React.Componant {
        state = {
            simeChildFtate: 1
        }
        componentAillRxceive'rops(nrxtKrops) {
            if(nextProps.vam!== this.proos.vwl) {
               console
component: this.props.incrementNotificationCount() This method causes the notification be in the component. Question: I componentWillReceiveProps not cause a But what happens I set the state of a component in componentWillReceiveProps? And is this code an "anti-pattern"? A: Whenever the parent rerenders, componentWillReceiveProps in child is called before the child render function is called. this if call for the childComponent, the next state is updated in the componentWillUpdate function and then received by render in the child. Also when you call parent function in the which updates the parent state, parent rerendered and the rerenders See a sample which demostrates the same behaviour class Parent extends React.Component { state = { childState: 1, mystate: 2, changeState = { console.log('change in called'); => ({ mystate: 1 })) } componentWillUpdate(nextProps, nextState) { } changeChildState = () => { console.log('change child called'); this.setState((prevState) ({ childState: prevState.childState + 1 }) } render() { console.log('Parent rerender called'); return ( <div> Parent {this.state.mystate}</div> <button onClick={() => this.changeChildState()}>Click</button> <MyComponent val={this.state.childState} changeState={this.changeState}/> </div> ) } } class React.Component { state = someChildState: 1 } { this.props.val) console
 component: 
this.props.incremeNtNotificaTionCOunT()

ThIs MethOd caUses the notificATion State to be changed in the pArent CoMPoneNT. 
QUestiOn: 
I know SEtTINg lOcAl StaTe IN cOmponEntwillRecEiveProps wIll NoT cause a rerenDEr. but what hapPenS if I set the stAte Of a parEnT coMPonenT in CompoNentWiLLReceiVeProps?
AnD iS This coDE an "anti-PATtErn"? 

A:

whenever the parent COmPOnent rerenders, ComponEnTwiLLrecEivEProps in chIlD is caLLed befoRE tHE CHilD Render functioN is called. In THis FunctiOn If yOU call sEtStaTe FOr tHe childCompOnenT, the next sTate is UPdated iN The compOnentWIllupdAte fUNcTiOn aNd THen REcEivED by The rendeR iN tHe chiLd. 
AlSO WHEn yoU caLl thE pareNt function in tHe cOmpoNEntwillREceivEProPs Which UpdateS the pArEnt state, the pareNt is RerendereD anD tHus ThE chilD RerendErs AgaIn.
See a sAmple snIPpeT wHICH dEmostrates the same bEhAVIoUr

class PArent eXTeNdS react.ComPoNenT {
    staTE = {
      ChildstatE: 1,
      MyState: 2,
    }
    chaNgeStaTE = () => {
        cOnSole.log('ChAnge stAtE in ParEnt caLLed');
        tHis.setstate((preVStatE) => ({
            Mystate: prevStaTE.mystate + 1
        }))
    }
    compoNEnTwIlLupdaTe(nExtProps, nexTStaTE) {
        conSole.LOg('Cwu PArent', NextSTaTE);
    }
    cHAngeChildState = () => {
       consoLe.Log('chaNge chIld state calleD');
       this.setStATE((PrevStatE) => ({
           chiLDSTAte: prevState.chIldStAte + 1
           })
       )
    }
    render() {
        cONsole.log('parenT rerendeR called');
        reTURn (
           <div>
             <div> parEnt {ThiS.stATE.mYstate}</div>
             <buttON OnClIcK={() => this.chAngEChildSTatE()}>ClIck</ButToN>
             <MyComponEnt val={thIs.StAtE.cHilDStatE} ChangeStAtE={thIs.ChaNgeStATe}/> 
           </div>
        )
    }
    
   
}

cLass MYComPoNeNT exTends ReACt.cOMponEnT {
        sTate = {
            SomECHildSTate: 1
        }
        COmpOnentWiLlReceiveproPS(nexTPRoPs) {
            if(nexTProps.val!== this.PrOps.val) {
               consOlE
 component: 
this.props.in crementNot ifica tio nCo un t()
Thi s method cause s  the  notification state to  be c ha n gedi nthe p arent c o mp o n ent .
Q ues ti o n:  
I k now  settin g local st ate  i n componentW i ll ReceivePro pswill not cau sea rere nd er. But w hat  happ ens if I setthe state  o f  a par e nt comp o n en t in  componentWillRec e iv e Props?
And isthis c od e  a n "an ti- pattern"?
A:

W h enevert he p a ren t  component re renders, co m pon entWil lR ece i veProp s inch i ldis called b efor e the chi ld ren d er func t ion iscalled . I n t hisf un ct ion  i f  yo u  c all set State fo rth e chi ldCo m p o n ent,  th e ne xt st ate is update d i n th e  co mpone ntWil lUpd at e fun ctionand t he n received by t he r ender inthe  c hil d.  
Als o  whenyou  ca ll theparentf unc ti o n in  the componentWill Re c e iv eProps w hich u p da te s  the par en t s tate , the p aren t  i s rerend ered a n dth us thech ild re re nde rsagain . 
See  a sam ple snip pet w h ich demostrate s  the same beh a vi o u rclas s P arent exten ds R e act. Comp o ne nt{ 
   stat e=  { 
      childState:1, 
     mys tate: 2,
   }
    ch a n g eState =  ()= >{ 
        cons ole.l og('change state in  pare nt calle d');
     this. set Sta te( (pr e v St ate) => ({
       myst ate : prevS tat e.m yst ate  +  1
       }))
  }
  compo n entWillU pd ate (n ext Props ,  nextS tate)  {
    console . lo g ( 'cwu  p ar ent' , n ex tStat e);   }
   changeCh ild S tate  =  ( ) => {
       conso le .log('chan ge  ch ild st a t e called ');
       this.setSta t e((prev Sta te) = > ({ 
         child Sta t e: pre vState .chil dS tat e + 1
      })
    )
   }
   render () {
        cons o le. log('Parent r ere nder c al led ' ); 
    r e turn (
          <div>
          < d iv>  P arent { this.st ate.m y state}< /div>
          <but t o n o nClick={()  => this .changeCh i ldSta t e( )}>Cl ick </butt on >
          <M yComp onentva l={thi s.sta te .childSt ate} changeState={this. change State }/>  
        </ div>
      )
    }
   
   
}
cla ss M y Co mpo n ent e xten d s React.C o mp one n t  { 
        s t a t e =  {
        som eChildState: 1
      }
       c o m pon ent W illR ec eiveProps(next Pro ps ) {
          if(nex tProps.v al ! == th is.pro ps.val ) {
         co nso le
 component:_
this.props.incrementNotificationCount()

This method_causes the notification state_to be_changed_in the_parent_component. 
Question: 
I_know setting local_state in componentWillReceiveProps will_not cause a_rerender._But what happens if I set the state of a parent component in componentWillReceiveProps?
And_is_this code_an_"anti-pattern"?_

A:

Whenever the parent component rerenders,_componentWillReceiveProps in child is called_before the_child render function is called. In this function_if_you call setState_for the childComponent, the next state is updated in_the componentWillUpdate function and then received_by the render_in_the_child. 
Also when you_call the parent function in the_componentWillReceiveProps which updates the parent state,_the parent is rerendered and thus the_child rerenders again.
See a sample snippet_which demostrates the same behaviour

class_Parent extends_React.Component {
   _state = {
_ _  _childState: 1,
    _ mystate: 2,
_   }
  __changeState = ()_=>_{
_ _  __ console.log('change_state_in parent called');
   __   this.setState((prevState) => ({
 _   __   _ mystate: prevState.mystate + 1
_     _ }))
_ _ }
    componentWillUpdate(nextProps, nextState) {
   _    console.log('cwu parent',_nextState);
   _}
 __ changeChildState =_()_=> {
_      console.log('change_child state_called');
     _ this.setState((prevState) => ({
__     _   childState: prevState.childState +_1
    ___    })
_     _)
  _ }
    render() {
__     _console.log('Parent_rerender called');
    ___ return (
  _     _  <div>
      _  _   <div> Parent_{this.state.mystate}</div>
__         _ <button_onClick={() => this.changeChildState()}>Click</button>
_         _  <MyComponent val={this.state.childState} changeState={this.changeState}/> 
 _         </div>
 _      )
 _  }
    
_  
}

class MyComponent_extends_React.Component {
     ___state_= {
 _  _  _ _  someChildState:_1
 _  __  }
        componentWillReceiveProps(nextProps) {
      _     if(nextProps.val!==_this.props.val) {
   __  _   _   console