Useeffect hook example 2

Author: ayush-gupta07

src/hooks/useEffect/examples/02_EffectCleanup.tsx

@@ -0,0 +1,34 @@
+/**
+ * Example: EffectCleanup
+ *
+ * Explanation:
+ * - Shows how to return a cleanup function from useEffect.
+ * - Common for unsubscribing from events, canceling timers, or cleaning resources.
+ * - Demonstrates mount → effect → cleanup → unmount lifecycle.
+ */
+import { useEffect, useState } from "react";
+
+export default function EffectCleanup() {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div>
+      <button onClick={() => setVisible(v => !v)}>
+        {visible ? "Hide" : "Show"} Timer
+      </button>
+      {visible && <Timer />}
+    </div>
+  );
+}
+
+function Timer() {
+  useEffect(() => {
+    const id = setInterval(() => console.log("tick"), 1000);
+    return () => {
+      console.log("cleanup: clearing interval");
+      clearInterval(id);
+    };
+  }, []);
+
+  return <p>Timer running (check console)…</p>;
+}

src/hooks/useEffect/useEffect.tsx

@@ -7,7 +7,7 @@
  */
 
 import BasicLog from "./examples/01_BasicLog";
-// import EffectCleanup from "./examples/EffectCleanup";
+import EffectCleanup from "./examples/02_EffectCleanup";
 // import DependencyArray from "./examples/DependencyArray";
 // import WindowResizeListener from "./examples/WindowResizeListener";
 // import FetchData from "./examples/FetchData";
@@ -43,9 +43,9 @@ export default function UseEffectShowcase() {
         <BasicLog />
       </Demo>
 
-      {/* <Demo title="2) EffectCleanup — cleanup on unmount">
+      <Demo title="2) EffectCleanup — cleanup on unmount">
         <EffectCleanup />
-      </Demo> */}
+      </Demo>
 
       {/* <Demo title="3) DependencyArray — [] vs deps vs no deps">
         <DependencyArray />