useEffect example

react-advanced-tag1/src/App.tsx

@@ -1,4 +1,5 @@
 import './App.css'
+import EffectExercises from './components/exercises/EffectExercises'
 import Heading from './components/globals/Heading'
 import MainLayout from './layouts/MainLayout'
 
@@ -6,6 +7,7 @@ function App() {
 
   return <MainLayout>
     <Heading />
+    <EffectExercises />
     </MainLayout>
 }
 

react-advanced-tag1/src/components/exercises/EffectExercises/index.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react"
+
+export default function EffectExercises() {
+
+    const [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+        console.log("EffectExercises mounted");
+        const interval = setInterval(() => {
+            setCounter(prevCounter => prevCounter + 1);
+        }
+        , 1000);
+        return () => {
+            console.log("EffectExercises unmounted");
+            clearInterval(interval);
+        }
+    }, [counter]);
+    return (
+        <section>
+            <h2>Effect Exercises</h2>
+            <p>Counter: {counter}</p>
+
+            <button onClick={() => setCounter(0)}>Reset</button>
+        </section>
+    )
+}