usestate hooks examples

Author: ayush-gupta07

src/hooks/useState/examples/05_ControlledFormMinimal.tsx

@@ -0,0 +1,54 @@
+/**
+ * Example: ControlledFormMinimal
+ * What: Multi-field controlled form with reset.
+ * Why: Shows how to manage form state as a single object via useState.
+ * Concepts: Controlled inputs, updater by key, type-narrowing for selects.
+ */
+import { useState } from "react";
+
+type Form = { name: string; email: string; role: "user" | "admin" };
+
+export default function ControlledFormMinimal() {
+  // Store all form fields in a single state object
+  const initial: Form = { name: "", email: "", role: "user" };
+  const [form, setForm] = useState<Form>(initial);
+
+  // Generic updater function: updates any field by key
+  // Uses computed property names [key] to dynamically set the field
+  const update = (key: keyof Form, value: string) => {
+    setForm(f => ({ ...f, [key]: value }));
+  };
+
+  return (
+    <form onSubmit={e => e.preventDefault()}>
+      {/* Controlled input: value from state, updates on change */}
+      <input 
+        placeholder="name" 
+        value={form.name} 
+        onChange={e => update("name", e.target.value)} 
+      />
+      
+      <input 
+        placeholder="email" 
+        value={form.email} 
+        onChange={e => update("email", e.target.value)} 
+      />
+      
+      {/* Controlled select: works same as input */}
+      <select 
+        value={form.role} 
+        onChange={e => update("role", e.target.value)}
+      >
+        <option value="user">user</option>
+        <option value="admin">admin</option>
+      </select>
+      
+      {/* Reset form to initial values */}
+      <button type="button" onClick={() => setForm(initial)}>Reset</button>
+      
+      {/* Display current form state as JSON */}
+      <pre>{JSON.stringify(form, null, 2)}</pre>
+    </form>
+  );
+}
+

src/hooks/useState/examples/06_BatchingAndTiming.tsx

@@ -0,0 +1,35 @@
+/**
+ * Example: BatchingAndTiming
+ * What: Observe how React batches state updates across the same tick and microtasks.
+ * Why: Helps reason about when UI updates happen and why functional updates are safer.
+ * Concepts: React 18+ automatic batching, microtask (Promise) boundary.
+ */
+import { useState } from "react";
+
+export default function BatchingAndTiming() {
+  const [n, setN] = useState(0);
+
+  const click = async () => {
+    // These two updates happen in the same tick - React batches them
+    // Only ONE re-render happens after both updates complete
+    setN(v => v + 1); // Update 1: n becomes n+1
+    setN(v => v + 1); // Update 2: n becomes n+2 (uses result from update 1)
+
+    // Wait for next microtask (Promise resolves)
+    await Promise.resolve();
+    
+    // Even after microtask boundary, React 18+ still batches this
+    // Still part of the same event, so batched with the above updates
+    setN(v => v + 1); // Update 3: n becomes n+3
+    
+    // Result: UI updates once with final value (n+3)
+  };
+
+  return (
+    <div>
+      <p>n = {n}</p>
+      {/* Click to see batching: all 3 increments happen together */}
+      <button onClick={click}>Increment 3</button>
+    </div>
+  );
+}

src/hooks/useState/examples/07_UndoRedoMinimal.tsx

@@ -0,0 +1,64 @@
+/**
+ * Example: UndoRedoMinimal
+ * What: Basic undo/redo using three pieces of state (past/present/future).
+ * Why: Shows modeling complex behavior *only with useState* (no reducer).
+ * Concepts: History stacks, pushing/popping with functional updates.
+ */
+import { useState } from "react";
+
+export default function UndoRedoMinimal() {
+  // Three state pieces for undo/redo:
+  const [past, setPast] = useState<number[]>([]);     // Stack of previous values
+  const [present, setPresent] = useState(0);          // Current value
+  const [future, setFuture] = useState<number[]>([]); // Stack of "undone" values
+
+  // Set new value: save current to past, clear future
+  const set = (val: number) => {
+    setPast(p => [...p, present]); // Push current value to past stack
+    setPresent(val);               // Set new current value
+    setFuture([]);                 // Clear future (can't redo after new change)
+  };
+  
+  // Undo: move current to future, pop from past to current
+  const undo = () => {
+    setPast(p => {
+      if (!p.length) return p; // Nothing to undo
+      
+      const prev = p[p.length - 1];           // Get last past value
+      setFuture(f => [present, ...f]);        // Push current to future stack
+      setPresent(prev);                       // Restore previous value
+      return p.slice(0, -1);                  // Remove last item from past
+    });
+  };
+  
+  // Redo: move current to past, pop from future to current
+  const redo = () => {
+    setFuture(f => {
+      if (!f.length) return f; // Nothing to redo
+      
+      const next = f[0];                    // Get first future value
+      setPast(p => [...p, present]);       // Push current to past stack
+      setPresent(next);                     // Restore next value
+      return f.slice(1);                    // Remove first item from future
+    });
+  };
+
+  return (
+    <div>
+      <p>Value: {present}</p>
+      
+      {/* Change value buttons */}
+      <button onClick={() => set(present - 1)}>-1</button>
+      <button onClick={() => set(present + 1)}>+1</button>
+      
+      {/* Undo/Redo buttons - disabled when stacks are empty */}
+      <button onClick={undo} disabled={!past.length}>
+        Undo
+      </button>
+      <button onClick={redo} disabled={!future.length}>
+        Redo
+      </button>
+    </div>
+  );
+}
+

src/hooks/useState/examples/08_PersistLocalStorage.tsx

@@ -0,0 +1,30 @@
+/**
+ * Example: PersistLocalStorage
+ * What: Persist a piece of state to localStorage using lazy init.
+ * Why: Demonstrates persistence + correct first-render initialization pattern.
+ * Concepts: Lazy initializer, side-effect persistence (tiny useEffect), toggles.
+ */
+import { useEffect, useState } from "react";
+
+export default function PersistLocalStorage() {
+  // Lazy init: read from localStorage on first render only
+  // If no saved value exists, default to "light"
+  const [theme, setTheme] = useState<string>(() => 
+    localStorage.getItem("theme") || "light"
+  );
+  
+  // Save to localStorage whenever theme changes
+  // This runs after every render where theme is different
+  useEffect(() => { 
+    localStorage.setItem("theme", theme); 
+  }, [theme]);
+
+  return (
+    <div>
+      {/* Toggle between light and dark themes */}
+      <button onClick={() => setTheme(t => (t === "light" ? "dark" : "light"))}>
+        Toggle theme (current: {theme})
+      </button>
+    </div>
+  );
+}