Useeffet example 4

Author: ayush-gupta07

src/hooks/useEffect/examples/04_WindowResizeListner.tsx

@@ -0,0 +1,21 @@
+/**
+ * Example: WindowResizeListener
+ *
+ * Explanation:
+ * - Demonstrates subscribing to global events (window resize) inside useEffect.
+ * - Teaches why cleanup is required to prevent leaks.
+ * - Common real-world pattern: resize listeners, keyboard shortcuts, scroll tracking.
+ */
+import { useEffect, useState } from "react";
+
+export default function WindowResizeListener() {
+  const [size, setSize] = useState({ w: window.innerWidth, h: window.innerHeight });
+
+  useEffect(() => {
+    const handler = () => setSize({ w: window.innerWidth, h: window.innerHeight });
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+
+  return <p>Window size: {size.w} × {size.h}</p>;
+}

src/hooks/useEffect/useEffect.tsx

@@ -9,7 +9,7 @@
 import BasicLog from "./examples/01_BasicLog";
 import EffectCleanup from "./examples/02_EffectCleanup";
 import DependencyArray from "./examples/03_DependencyArray";
-// import WindowResizeListener from "./examples/WindowResizeListener";
+import WindowResizeListener from "./examples/04_WindowResizeListner";
 // import FetchData from "./examples/FetchData";
 // import MultipleEffects from "./examples/MultipleEffects";
 // import EffectVsLayoutEffect from "./examples/EffectVsLayoutEffect";
@@ -51,9 +51,9 @@ export default function UseEffectShowcase() {
         <DependencyArray />
       </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">
         <FetchData />