Life Cycle Function Componant LifeCycleF

 ===========================LifeCycleF.js file name=

import React,{useState,useEffect,useRef} from "react";

export default function () {
    const [count,setCount]=useState(0);
    //componentDidMount
    useEffect(()=>{
        console.log("Step 4: componentDidMount");

        //componentWillUnmount
        return ()=>{
            console.log("Step 6: componentWillUnmount");
        }

    },[]);

    //componentDidUpdate state ,props, ref
    useEffect(()=>{
        if(count!=0)
            console.log("Step 5: componentDidUpdate");
    },[count]);

    return <>
    <h1>computer</h1>
     <button onClick={()=>{setCount((p)=>p+1)}}>Counting</button>
        <h1>count: {count}</h1>
    </>
}

==================App.js=========

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

import LifeCycleF from "./Lifcycle/LifeCycleF";



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


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

export default App;