Life Cycle In class

 ========================Class==================

import React,{useRef} from "react";

export default class LifeClass extends React.Component{

    //===Step1 Render=
    constructor() {
        super();
        this.state={
            name:"prem"
        }
        this.name = React.createRef();
        this.output = React.createRef();
        console.log("Step1 constructor");
    }
    Show(){
        alert(this.name.current.value);
        this.output.current.innerHTML = this.name.current.value;

    }

    //===Step2 Render=
    render() {
        return (
            <div>
                {/*=======Step3=========*/}
                <input onChange={(e)=>this.setState({name:e.target.value})} ref={this.name} placeholder={"EnterName"}/>
                <button onClick={()=>{this.Show()}} >Show</button>
                <h1 ref={this.output}></h1>
                <h1>{this.state.name}</h1>
            </div>
        );
    }

    componentDidMount() {
        console.log("Step4 componentDidMount");
    }

     //=============Section 2============
    //when Props, state and
    componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('Update state componentDidUpdate');
        this.setState({name:"tejas"});
    }

    //====execute before render
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('Update state shouldComponentUpdate');
        //sabir prem tejas
        if(this.state.name==="sabir"){

            return true;
        }else
        {
            return false;
        }
    }

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


}

=================use=================

import logo from './logo.svg';
import './App.css';
import React,{useState} from "react";

import {Prem} from "./Home/Prem";
import {TestGame, TestRotate} from "./Rabit/Rabit";
import PropValidation from "./propval/PropValidation";
import LifeClass from "./Lifcycle/LifeClass";



function App() {
    const [isRemove,setIsRemove]=useState(false);


    return <>
        <button onClick={()=>{setIsRemove((p)=>!p)}}>{isRemove?"Off":"On"}</button>
        {
            !isRemove&&<LifeClass/>
        }
</>;
}

export default App;