useeffect hook example 3

Author: ayush-gupta07

src/hooks/useEffect/examples/03_DependencyArray.tsx

@@ -0,0 +1,25 @@
+/**
+ * Example: DependencyArray
+ *
+ * Explanation:
+ * - Demonstrates effect behavior with different dependency arrays.
+ * - [] → run once (on mount).
+ * - [count] → run on mount + when count changes.
+ * - No deps → run after every render.
+ */
+import { useEffect, useState } from "react";
+
+export default function DependencyArray() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => console.log("No deps: runs every render"));
+  useEffect(() => console.log("Empty deps: runs once"), []);
+  useEffect(() => console.log("Deps: runs on count change →", count), [count]);
+
+  return (
+    <div>
+      <p>count = {count}</p>
+      <button onClick={() => setCount(c => c + 1)}>+1</button>
+    </div>
+  );
+}

src/hooks/useEffect/useEffect.tsx

@@ -8,7 +8,7 @@
 
 import BasicLog from "./examples/01_BasicLog";
 import EffectCleanup from "./examples/02_EffectCleanup";
-// import DependencyArray from "./examples/DependencyArray";
+import DependencyArray from "./examples/03_DependencyArray";
 // import WindowResizeListener from "./examples/WindowResizeListener";
 // import FetchData from "./examples/FetchData";
 // import MultipleEffects from "./examples/MultipleEffects";
@@ -47,9 +47,9 @@ export default function UseEffectShowcase() {
         <EffectCleanup />
       </Demo>
 
-      {/* <Demo title="3) DependencyArray — [] vs deps vs no deps">
+      <Demo title="3) DependencyArray — [] vs deps vs no deps">
         <DependencyArray />
-      </Demo> */}
+      </Demo>
 
       {/* <Demo title="4) WindowResizeListener — global event subscription">
         <WindowResizeListener />