I use the useEffect hook inside functional ponents with a dependency so that dependency changes , useEffect function will re-run like this :

const [show, setShow] = React.useState(false);

React.useEffect(() => {
 
    console.log("Do something")

} , [show]);

I wanted to know what is available in react's class ponent to do exactly like this ? Is there any lifecycle method to have this functionality ?

I use the useEffect hook inside functional ponents with a dependency so that dependency changes , useEffect function will re-run like this :

const [show, setShow] = React.useState(false);

React.useEffect(() => {
 
    console.log("Do something")

} , [show]);

I wanted to know what is available in react's class ponent to do exactly like this ? Is there any lifecycle method to have this functionality ?

• javascript
• reactjs
• react-hooks
• react-lifecycle
• react-lifecycle-hooks

Share Improve this question Follow asked Sep 19, 2021 at 11:27 Mehdi FarajiMehdi Faraji 3,8841010 gold badges4646 silver badges9595 bronze badges 1

• ˋponentDidUpdate` must approach it. Try to watch the doc – Pierre Commented Sep 19, 2021 at 11:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

you can use bination of ponentDidMount and ponentDidUpdate:

ponentDidMount(){ //use this method if you want to trigger the side effect first time
   console.log("Do something")
}

ponentDidUpdate(prevProps,prevState) {
  if (this.state.show !== prevState.show) {
    console.log("Do something");
  }
}

To control your ponent use shouldComponentUpdate (link for the article). It has 2 arguments nextProps and nextState. You can pare this.state.field and nextState.field and if they are different make side effect:

class ClickButton extends React.Component {
              
           constructor(props) {
               super(props);
               this.state = {class: "off", label: "press"};
               this.press = this.press.bind(this);
           }
           
           shouldComponentUpdate(nextProps, nextState){
               if(nextState.class !== this.state.class){
                  return true
               }
               return false;
           }
           
           press(){
               var className = (this.state.class==="off")?"on":"off";
               this.setState({class: className});
           }
           render() {
               return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;
           }
       }

If ypu return true from this method, it says React that ponent should update, false in other way, Component won't update.

Also you can extends from PureComponent (PureComponent), it will be automatically follow props and state:

class ClickButton extends React.PureComponent {
              
           constructor(props) {
               super(props);
               this.state = {class: "off", label: "press"};
                  
               this.press = this.press.bind(this);
           }
           
           press(){
               var className = (this.state.class==="off")?"on":"off";
               this.setState({class: className});
           }
           
           render() {
               return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;
           }
       }

But it makes a superficial parison (by reference). If you have nested fields in you state, and they are changing, PureComponent doesn't rerender Component.

There are other methods like ponentDidUpdate (link) and ponentDidMount (link). First, called when ponent rerender:

ponentDidUpdate(prevState) {
  if (this.state.userID !== prevState.userID) {
    this.fetchData(this.state.userID);
  }
}

Talking about second one, it will be called when ponent set in the DOM.

In your case use ponentDidUpdate