mardi 4 mai 2021

Can't understand nextProps in shouldComponentUpdate()?

All doubt I have is in shouldComponentUpdate(), in the App component when i update the state (button click) everything is re-rendered and the updated state is only passed as props to Lifecycle component then How this.props.text in the Lifecycle component refers to the previous state's value ...... Its like magic for me? kindly post your thoughts

  class App extends React.Component{
  constructor(){
    super();
    this.state = {
      text : "hello_"
    }
  }


  handle = () =>{
    this.setState({text : this.state.text+'hello_'})
  }
  render(){
    return(
      <div>
        <p>
        {'App' + this.state.text}
        </p>
        <button onClick = {this.handle}> click </button>
        <Lifecycle text = {this.state.text}/>
      </div>
      )
  }
}


Lifecycle.js
  class Lifecycle extends React.Component{
  constructor(props){
    super(props);
    }

 
  shouldComponentUpdate(nextProps, nextState){
    console.log('shouldComponentUpdate', nextProps, this.props.text)
    return true
  }
  render(){
    return(
        <div>
         {this.props.text}
        </div>
      )
  }
}```



Aucun commentaire:

Enregistrer un commentaire