Add basic useEffect example and update showcase

Introduces a simple useEffect example (01_BasicLog) that logs count changes after render. Updates the useEffect showcase to display this example and comments out the useState showcase in App.tsx.

Author: ayush-gupta07

src/App.tsx

@@ -1,11 +1,13 @@
 import './App.css'
+import UseEffectShowcase from './hooks/useEffect/useEffect'
 import UseStateShowcase from './hooks/useState/UseState'
 
 function App() {
 
   return (
     <>
-     <UseStateShowcase />
+     {/* <UseStateShowcase /> */}
+     <UseEffectShowcase />
     </>
   )
 }

src/hooks/useEffect/examples/01_BasicLog.tsx

@@ -0,0 +1,24 @@
+/**
+ * Example: BasicLog
+ *
+ * Explanation:
+ * - Simplest useEffect example: log after render.
+ * - Demonstrates that effects run *after* paint.
+ * - Useful for learning that useEffect is asynchronous relative to rendering.
+ */
+import { useEffect, useState } from "react";
+
+export default function BasicLog() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    console.log("Effect: count changed →", count);
+  }, [count]);
+
+  return (
+    <div>
+      <p>Count = {count}</p>
+      <button onClick={() => setCount(c => c + 1)}>+1</button>
+    </div>
+  );
+}

src/hooks/useEffect/useEffect.tsx

@@ -6,7 +6,7 @@
  * Each demo is isolated in its own file inside `examples/`.
  */
 
-// import BasicLog from "./examples/BasicLog";
+import BasicLog from "./examples/01_BasicLog";
 // import EffectCleanup from "./examples/EffectCleanup";
 // import DependencyArray from "./examples/DependencyArray";
 // import WindowResizeListener from "./examples/WindowResizeListener";
@@ -39,43 +39,43 @@ export default function UseEffectShowcase() {
     <section>
       <h1>useEffect — Curated Examples</h1>
 
-      {/* <Demo title="1) BasicLog — log after render">
+      <Demo title="1) BasicLog — log after render">
         <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">
+      {/* <Demo title="3) DependencyArray — [] vs deps vs no deps">
         <DependencyArray />
-      </Demo>
+      </Demo> */}
 
-      <Demo title="4) WindowResizeListener — global event subscription">
+      {/* <Demo title="4) WindowResizeListener — global event subscription">
         <WindowResizeListener />
-      </Demo>
+      </Demo> */}
 
-      <Demo title="5) FetchData — async request with cleanup">
+      {/* <Demo title="5) FetchData — async request with cleanup">
         <FetchData />
-      </Demo>
-
+      </Demo> */}
+{/* 
       <Demo title="6) MultipleEffects — separate concerns">
         <MultipleEffects />
-      </Demo>
+      </Demo> */}
 
-      <Demo title="7) EffectVsLayoutEffect — timing differences">
+      {/* <Demo title="7) EffectVsLayoutEffect — timing differences">
         <EffectVsLayoutEffect />
-      </Demo>
+      </Demo> */}
 
-      <Demo title="8) DebouncedInput — debounce with setTimeout">
+      {/* <Demo title="8) DebouncedInput — debounce with setTimeout">
         <DebouncedInput />
-      </Demo>
+      </Demo> */}
 
-      <Demo title="9) IntervalCounter — timer with cleanup">
+      {/* <Demo title="9) IntervalCounter — timer with cleanup">
         <IntervalCounter />
-      </Demo>
+      </Demo> */}
 
-      <Demo title="10) RaceConditionFix — async abort pattern">
+      {/* <Demo title="10) RaceConditionFix — async abort pattern">
         <RaceConditionFix />
       </Demo> */}
     </section>