Update phase

App.js

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      counter: 0
    };

    console.log("Inside constructor");
  }

  incrementCounter = () => {
    this.setState((state) => {
      return {
        counter: state.counter + 1
      };
    });
  };

  render() {
    console.log("Inside render");
    return (
      <div className="App">
        <h1>Component update life cycle</h1>
        <h1>{this.state.counter}</h1>
        <button onClick={this.incrementCounter}>INCREMENT</button>
      </div>
    );
  }

  componentDidUpdate(oldProps, oldState) {
    console.log("Inside componentDidUpdate");
    if (oldState.counter === 3) {
      this.setState({
        counter: 0
      });
    }
  }

  componentDidMount() {
    console.log('Inside componentDidMount');
  }
}

export default App;