React useEffect Hooks

React : useEffect Hooks : initialise, mounting, updating, unmounting.

React app run and check console also for count.

import { useEffect, useState } from "react";

function App() {

  //useEffect Hooks  : initialise, mounting, updating, unmounting

  const [count, setCount] = useState(0);

  useEffect(() => {

    console.log("Component mounted or updated. Current count:", count);

   

    return () => {

      console.log("Cleanup before component unmounts or before next effect");

    };

  }, [count]);

 

  const increment = () => {

    setCount(count + 1);

  };

 

  const decrement = () => {

    setCount(count - 1);

  };

  return (

    <div>

      <h1>Counter: {count}</h1>

      <button onClick={increment}>Increment</button>

      <button onClick={decrement}>Decrement</button>

    </div>

  );

}

export default App;