add react-hooks-demo play demonstrating core React hooks

react-hooks-demo/ReactHooksDemo.module.css

@@ -0,0 +1,9 @@
+.container {
+  padding: 20px;
+  font-family: sans-serif;
+}
+
+button {
+  margin-right: 10px;
+  margin-top: 10px;
+}

react-hooks-demo/ReactHooksDemo.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
+
+export default function ReactHooksDemo() {
+  // useState
+  const [count, setCount] = useState(0);
+
+  // useEffect
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds((prev) => prev + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // useMemo
+  const expensiveCalculation = (num: number) => {
+    console.log("Calculating...");
+    return num * 1000;
+  };
+
+  const memoizedValue = useMemo(() => {
+    return expensiveCalculation(count);
+  }, [count]);
+
+  // useRef
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+
+  // useCallback
+  const resetCounter = useCallback(() => {
+    setCount(0);
+  }, []);
+
+  return (
+    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+      <h2>React Hooks Demo</h2>
+
+      <hr />
+
+      <h3>useState Counter</h3>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+      <button onClick={resetCounter}>Reset</button>
+
+      <hr />
+
+      <h3>useEffect Timer</h3>
+      <p>Timer running: {seconds} seconds</p>
+
+      <hr />
+
+      <h3>useMemo Expensive Calculation</h3>
+      <p>Memoized Value: {memoizedValue}</p>
+
+      <hr />
+
+      <h3>useRef Input Focus</h3>
+      <input ref={inputRef} placeholder="Click button to focus me" />
+      <button onClick={focusInput}>Focus Input</button>
+
+    </div>
+  );
+}

react-hooks-demo/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  title: "React Hooks Demo",
+  description:
+    "Interactive demo showcasing useState, useEffect, useMemo, useRef, and useCallback hooks.",
+  slug: "react-hooks-demo",
+  author: "Ifraah_Tabassum",
+  tags: ["react", "hooks", "learning"],
+};