[React] Component Lifecycle Class Component

import React, { Component } from "react";

class Lifecycle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      isMounted: false,
    };
  }

  static getDerivedStateFromProps(props, state) {
    console.log(" \nGet Parent State & Props", state);
    return null;
  }

  componentDidMount() {
    console.log("\n %c MOUNTED \n", "background-color: cyan; font-size: 20px");
    this.setState({ isMounted: true });
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("Should update?", "Count :", nextState.count);
    if (nextState.count > 5) {
      console.log("UDAH GAK BISA UPDATE! COUNT UDAH ", nextState.count);
      return false;
    }
    return true;
  }

  // getSnapshotBeforeUpdate(prevProps, prevState) {
  //   if (prevState.count !== this.state.count) {
  //     console.log("Get Snapshot |", "Previous Count: ", prevState.count);
  //   } else console.log("Snapshot kosongg");
  //   return null;
  // }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(
      "\n %c UPDATE \n",
      "background-color: yellow; font-size: 15px",

      prevState,
      snapshot,
      " \n "
    );
    return null;
  }

  componentWillUnmount() {
    console.log("UNMOUNT");
  }

  handleIncrementClick = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    console.log("\n %c RENDER \n", "background-color: green; font-size: 20px");
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button
          className="border p-2 border-black rounded-md m-5"
          onClick={this.handleIncrementClick}
        >
          Increment Count
        </button>
      </div>
    );
  }
}

export default Lifecycle;