From bbb4dd6be6bc3ed2560c0a73d1db0962fdcca6ca Mon Sep 17 00:00:00 2001
From: Ifraah Tabassum <81137447+IT0506@users.noreply.github.com>
Date: Fri, 6 Mar 2026 12:33:04 +0530
Subject: [PATCH] add react-hooks-demo play demonstrating core React hooks

This PR adds a new Play called "React Hooks Demo".

It demonstrates the following hooks:
- useState (counter)
- useEffect (timer)
- useMemo (expensive calculation optimization)
- useRef (input focus)
- useCallback (memoized function)

The play provides simple interactive examples to help beginners understand how these hooks work.

Signed-off-by: Ifraah Tabassum <81137447+IT0506@users.noreply.github.com>
---
 react-hooks-demo/ReactHooksDemo.module.css |  9 +++
 react-hooks-demo/ReactHooksDemo.tsx        | 69 ++++++++++++++++++++++
 react-hooks-demo/meta.ts                   |  8 +++
 3 files changed, 86 insertions(+)
 create mode 100644 react-hooks-demo/ReactHooksDemo.module.css
 create mode 100644 react-hooks-demo/ReactHooksDemo.tsx
 create mode 100644 react-hooks-demo/meta.ts

diff --git a/react-hooks-demo/ReactHooksDemo.module.css b/react-hooks-demo/ReactHooksDemo.module.css
new file mode 100644
index 000000000..f42cf4b5d
--- /dev/null
+++ b/react-hooks-demo/ReactHooksDemo.module.css
@@ -0,0 +1,9 @@
+.container {
+  padding: 20px;
+  font-family: sans-serif;
+}
+
+button {
+  margin-right: 10px;
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/react-hooks-demo/ReactHooksDemo.tsx b/react-hooks-demo/ReactHooksDemo.tsx
new file mode 100644
index 000000000..54b86fab8
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/react-hooks-demo/meta.ts b/react-hooks-demo/meta.ts
new file mode 100644
index 000000000..c15760dd8
--- /dev/null
+++ b/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"],
+};
\ No newline at end of file