React Hooks & Patterns Lab Guide

// Vanilla JS: "change this, then change that, then change the other thing"
document.getElementById("count").textContent = count;
document.getElementById("count").style.color = count > 5 ? "red" : "black";

// React: "here's what the UI looks like when count is this value"
<span style={{ color: count > 5 ? "red" : "black" }}>{count}</span>

import { useState } from "react";

// ============================================================
// SectionStepper — Show one section at a time
// ============================================================
// Each demo page uses this to step through sections A, B, C, D.
// Only the active section is MOUNTED — previous sections are unmounted.
// This keeps the console clean and lets students focus on one concept.
//
// Usage:
//   <SectionStepper sections={[
//     { label: "A. The Broken Counter", content: <BrokenCounter /> },
//     { label: "B. The Working Counter", content: <WorkingCounter /> },
//   ]} />

export default function SectionStepper({ sections }) {
  const [step, setStep] = useState(0);

  const current = sections[step];

  return (
    <div>
      {/* Step indicator and navigation */}
      <div className="stepper-nav">
        <button
          className="btn btn-secondary"
          onClick={() => setStep(prev => prev - 1)}
          disabled={step === 0}
        >
          ← Previous
        </button>

        <div className="stepper-tabs">
          {sections.map((section, i) => (
            <button
              key={i}
              className={`stepper-tab ${i === step ? "stepper-tab-active" : ""} ${i < step ? "stepper-tab-done" : ""}`}
              onClick={() => {
                console.log(`SECTION: switching to "${section.label}" (previous section will unmount)`);
                setStep(i);
              }}
            >
              {section.label}
            </button>
          ))}
        </div>

        <button
          className="btn btn-primary"
          onClick={() => setStep(prev => prev + 1)}
          disabled={step === sections.length - 1}
        >
          Next →
        </button>
      </div>

      {/* Progress bar */}
      <div className="stepper-progress">
        <div
          className="stepper-progress-bar"
          style={{ width: `${((step + 1) / sections.length) * 100}%` }}
        />
      </div>

      {/* Only the active section is mounted.
          When you switch, the old section unmounts (cleanup runs)
          and the new section mounts (effects run fresh).
          Watch the console! */}
      <div className="stepper-content">
        {current.content}
      </div>
    </div>
  );
}

import { useState, useRef } from "react";

// ============================================================
// Sections A & B: Imperative vs Declarative (Side by Side)
// ============================================================
// These two components do the SAME thing — increment a counter
// and change its color when it goes above 5.
// The difference is HOW they do it:
//   A (Imperative): manually tells the DOM what to change
//   B (Declarative): describes what the UI should look like
// Open the browser console to follow along!

// --- Section A: The Imperative (Vanilla JS) Way ---
function ImperativeWay() {
  // Using refs to get raw DOM elements — this is how jQuery/vanilla JS works
  const countRef = useRef(null);
  let count = 0;

  function handleClick() {
    count += 1;
    // We manually tell the DOM EXACTLY what to change:
    countRef.current.textContent = count;
    countRef.current.style.color = count > 5 ? "red" : "black";
    countRef.current.style.fontWeight = "bold";
    console.log("IMPERATIVE: I manually set textContent to", count, "and color to", count > 5 ? "red" : "black");
    // This is imperative: step 1, step 2, step 3...
    // YOU are responsible for every single DOM change.
  }

  return (
    <div className="demo-subsection">
      <h3>A. The Imperative Way (Vanilla JS Thinking)</h3>
      <p className="demo-note">
        This works, but YOU have to manually update every part of the DOM.
        Imagine doing this for 100 elements on a page!
      </p>
      <p>Count: <span ref={countRef}>0</span></p>
      <button className="btn btn-secondary" onClick={handleClick}>
        Increment (imperative)
      </button>
      {/* Problems with this approach:
          - You must track every DOM element manually
          - Easy to forget to update something
          - Hard to keep UI and data in sync
          - Gets unmanageable with complex UIs */}
    </div>
  );
}

// --- Section B: The Declarative (React) Way ---
function DeclarativeWay() {
  const [count, setCount] = useState(0);

  // React calls this entire function on every state change.
  // We just DESCRIBE what the UI should look like:
  console.log("DECLARATIVE: describing UI for count =", count);

  return (
    <div className="demo-subsection">
      <h3>B. The Declarative Way (React Thinking)</h3>
      <p className="demo-note">
        Same result, but we never touch the DOM directly.
        We describe WHAT the UI should be. React figures out HOW to update it.
      </p>
      {/* Notice: we don't say "change the color to red."
          We say: "the color IS red when count > 5."
          React handles the actual DOM changes. */}
      <p>
        Count:{" "}
        <span style={{ color: count > 5 ? "red" : "black", fontWeight: "bold" }}>
          {count}
        </span>
      </p>
      <button className="btn btn-primary" onClick={() => setCount(prev => prev + 1)}>
        Increment (declarative)
      </button>
    </div>
  );
}

// Combined: shown side by side
export default function ImperativeVsDeclarative() {
  return (
    <div className="side-by-side">
      <ImperativeWay />
      <DeclarativeWay />
    </div>
  );
}

import { useState } from "react";

// ============================================================
// Section C: State Drives UI — Traffic Light
// ============================================================
// The core React idea: you change STATE, and React updates the UI.
// You never say "turn off the red light, turn on the green light."
// You say "the light is green" and React figures out the DOM changes.
// Open the browser console to follow along!

export default function TrafficLight() {
  const [light, setLight] = useState("red");

  console.log("TRAFFIC LIGHT: state is", JSON.stringify(light), "→ React re-renders → UI updates automatically");

  // We never say "turn off the red, turn on the green."
  // We say "the light is green" and React updates everything.
  return (
    <div className="demo-subsection">
      <h3>C. State Drives UI — Traffic Light</h3>
      <p className="demo-note">
        Click a button. The state changes to a color name.
        The JSX says "if state is red, show red at full opacity."
        React handles the rest.
      </p>

      <div className="traffic-light">
        <div
          className="light-circle"
          style={{
            backgroundColor: "#e74c3c",
            opacity: light === "red" ? 1 : 0.2,
          }}
        />
        <div
          className="light-circle"
          style={{
            backgroundColor: "#f1c40f",
            opacity: light === "yellow" ? 1 : 0.2,
          }}
        />
        <div
          className="light-circle"
          style={{
            backgroundColor: "#2ecc71",
            opacity: light === "green" ? 1 : 0.2,
          }}
        />
      </div>

      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-danger" onClick={() => setLight("red")}>Red</button>
        <button className="btn btn-secondary" onClick={() => setLight("yellow")} style={{ backgroundColor: "#f1c40f", color: "#333" }}>Yellow</button>
        <button className="btn btn-primary" onClick={() => setLight("green")} style={{ backgroundColor: "#2ecc71" }}>Green</button>
      </div>

      <p>Current state: <strong>{light}</strong></p>
      <p className="demo-note">
        The JSX is like a template: "given this state, here's what the UI looks like."
        You change state → React re-renders → UI updates.
        You never manually toggle DOM elements on/off.
      </p>
    </div>
  );
}

import { useState } from "react";

// ============================================================
// Section D: Re-Rendering is Okay!
// ============================================================
// Every time state changes, React re-calls the entire component function.
// This sounds expensive, but it's actually fast!
// React compares old and new output and only touches what changed in the real DOM.
// Open the browser console to follow along!

export default function ReRenderingDemo() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // This runs every time the component renders
  console.log("RE-RENDER: This entire function just ran. count =", count, ", text =", JSON.stringify(text));

  return (
    <div className="demo-subsection">
      <h3>D. Re-Rendering is Okay!</h3>
      <p className="demo-note">
        Every click or keystroke re-runs this entire function.
        That sounds expensive, but it's actually fast!
        React compares old and new output and only touches what changed in the real DOM.
      </p>
      {console.log("RE-RENDER: computing JSX (this is cheap!)")}

      <div style={{ marginBottom: 8 }}>
        <button className="btn btn-primary" onClick={() => setCount(prev => prev + 1)} style={{ marginRight: 8 }}>
          Count: {count}
        </button>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Type to trigger re-renders..."
          style={{ padding: "4px 8px" }}
        />
      </div>

      <p className="demo-note" style={{ marginTop: 12 }}>
        <strong>How React works under the hood:</strong><br />
        1. State changes (setCount/setText called)<br />
        2. React re-calls this function → gets new JSX<br />
        3. React compares new JSX with old JSX (this is called "diffing")<br />
        4. React only updates the DOM elements that actually changed<br />
        5. Browser re-paints only the changed pixels<br />
        <br />
        This is why React is fast even though the whole function re-runs!
      </p>
    </div>
  );
}

import SectionStepper from "../SectionStepper";
import ImperativeVsDeclarative from "./ImperativeVsDeclarative";
import TrafficLight from "./TrafficLight";
import ReRenderingDemo from "./ReRenderingDemo";

// ============================================================
// React vs JavaScript — Understanding the React Mental Model
// ============================================================
// This file shows the fundamental difference between how
// vanilla JavaScript and React approach building UIs.
// Each section mounts one at a time so the console stays clean.

const sections = [
  { label: "A+B. Imperative vs Declarative", content: <ImperativeVsDeclarative /> },
  { label: "C. Traffic Light", content: <TrafficLight /> },
  { label: "D. Re-Rendering", content: <ReRenderingDemo /> },
];

export default function ReactVsJs() {
  return (
    <div className="demo-section">
      <h2>React vs JavaScript — A New Way to Think About UI</h2>
      <p className="demo-note">
        Open your browser console (F12 → Console) to see what happens behind the scenes.
        Use the section buttons below to step through each concept one at a time.
      </p>
      <SectionStepper sections={sections} />
    </div>
  );
}

import { useState } from "react";
import ReactVsJs from "./reactVsJs";

const TABS = [
  { id: "reactVsJs", label: "React vs JS" },
];

function App() {
  const [activeDemo, setActiveDemo] = useState("reactVsJs");

  return (
    <div>
      <h1>CS300 React Demos</h1>
      <nav className="demo-nav">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            className={`btn ${activeDemo === tab.id ? "btn-active" : "btn-secondary"}`}
            onClick={() => {
              console.log("NAV: switching to", tab.id, "(previous component will unmount)");
              setActiveDemo(tab.id);
            }}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      {activeDemo === "reactVsJs" && <ReactVsJs />}
    </div>
  );
}

export default App;

npm run dev
# Open http://localhost:5173
# Open the browser console (F12 → Console)
# Click through the sections A+B, C, D
# Watch the console logs!

git add -A
git commit -m "Add React vs JS demo — imperative vs declarative"
git push

const [count, setCount] = useState(0);
// count = the current value
// setCount = function to update it and trigger a re-render
// 0 = the initial value (only used on first render)

// ============================================================
// Section A: The Broken Counter
// ============================================================
// This component uses a plain variable instead of useState.
// Watch the console vs the screen — the variable changes, but the UI does not!
// This is the "aha" moment: React only re-renders when STATE changes.
// Open the browser console to follow along!

export default function BrokenCounter() {
  let count = 0; // This resets to 0 every time React calls this function!

  function handleClick() {
    count = count + 1;
    // The variable DID change — check the console:
    console.log("BROKEN COUNTER: variable is now", count);
    // But React doesn't know about it. No re-render happens.
    // The screen stays frozen at 0.
  }

  return (
    <div className="demo-subsection">
      <h3>A. The Broken Counter (plain variable)</h3>
      <p className="demo-note">
        Click the button and watch the console vs the screen. The variable changes, but the UI does not!
      </p>
      <p>Count on screen: <strong>{count}</strong></p>
      <button className="btn btn-secondary" onClick={handleClick}>
        Increment (broken)
      </button>
      {/* WHY is it broken?
          React only re-renders when STATE changes.
          A plain variable changing is invisible to React.
          Even if the variable changes, React never re-calls this function. */}
    </div>
  );
}

import { useState } from "react";

// ============================================================
// Section B: The Working Counter
// ============================================================
// Same counter as Section A, but now using useState.
// React knows about changes and re-renders the component!
// Open the browser console to follow along!

export default function WorkingCounter() {
  // useState returns [currentValue, setterFunction]
  // React will re-call this entire function whenever setCount is called.
  const [count, setCount] = useState(0);

  // This log runs every time the component renders (function is called):
  console.log("WORKING COUNTER: rendering with count =", count);

  function handleClick() {
    // setCount tells React: "Hey, state changed! Re-render me."
    setCount(count + 1);
    console.log("WORKING COUNTER: called setCount. count is STILL", count, "(until next render)");
    // Notice: count doesn't change immediately! It's a snapshot of THIS render.
  }

  return (
    <div className="demo-subsection">
      <h3>B. The Working Counter (useState)</h3>
      <p className="demo-note">
        Now the UI updates! Check the console — notice the component re-renders each time.
      </p>
      <p>Count on screen: <strong>{count}</strong></p>
      <button className="btn btn-primary" onClick={handleClick}>
        Increment (works!)
      </button>
    </div>
  );
}

import { useState } from "react";

// ============================================================
// Section C: The Stale State Trap
// ============================================================
// Why you sometimes need the updater function form: setCount(prev => prev + 1)
// The "direct" way sees a STALE snapshot of state.
// The "updater" way always reads the LATEST pending value.
// Open the browser console to follow along!

export default function StaleStateTrap() {
  const [count, setCount] = useState(0);

  console.log("STALE STATE: rendering with count =", count);

  function addThreeDirect() {
    // These all see the SAME snapshot of count (e.g., 0)
    // So this is like saying: setCount(0+1), setCount(0+1), setCount(0+1)
    // Result: count goes to 1, not 3!
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    console.log("STALE STATE: called setCount(count+1) three times. count was", count);
  }

  function addThreeUpdater() {
    // The updater function always receives the LATEST pending value
    // prev starts at current, then each call builds on the last
    setCount(prev => prev + 1); // prev=0 → 1
    setCount(prev => prev + 1); // prev=1 → 2
    setCount(prev => prev + 1); // prev=2 → 3
    console.log("STALE STATE: called setCount(prev => prev+1) three times");
  }

  return (
    <div className="demo-subsection">
      <h3>C. The Stale State Trap</h3>
      <p className="demo-note">
        Click each button and compare. The first only adds 1 (stale closure). The second adds 3 (updater function).
      </p>
      <p>Count: <strong>{count}</strong></p>
      <button className="btn btn-danger" onClick={addThreeDirect} style={{ marginRight: 8 }}>
        Add 3 (direct — broken)
      </button>
      <button className="btn btn-primary" onClick={addThreeUpdater}>
        Add 3 (updater — correct)
      </button>
      <br />
      <button className="btn btn-secondary" onClick={() => setCount(0)} style={{ marginTop: 8 }}>
        Reset
      </button>
    </div>
  );
}

import { useState } from "react";

// ============================================================
// Section D: Multiple State Variables
// ============================================================
// Each useState call is independent. Changing one doesn't affect the other.
// React remembers them by the ORDER they are called.
// This is why hooks must not be called inside conditions or loops.
// Open the browser console to follow along!

export default function MultipleStates() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  console.log("MULTIPLE STATES: rendering with name =", JSON.stringify(name), "age =", age);

  return (
    <div className="demo-subsection">
      <h3>D. Multiple State Variables</h3>
      <p className="demo-note">
        Change one input. Watch the console — the component re-renders, but the OTHER state stays the same.
      </p>
      <div style={{ marginBottom: 8 }}>
        <label>Name: </label>
        <input
          type="text"
          value={name}
          onChange={(e) => {
            console.log("MULTIPLE STATES: name changing to", JSON.stringify(e.target.value));
            setName(e.target.value);
          }}
          style={{ padding: "4px 8px", marginLeft: 8 }}
        />
      </div>
      <div style={{ marginBottom: 8 }}>
        <label>Age: </label>
        <button className="btn btn-secondary" onClick={() => {
          console.log("MULTIPLE STATES: age incrementing");
          setAge(prev => prev + 1);
        }}>
          {age} (click to increment)
        </button>
      </div>
      <p>Current values — name: "<strong>{name}</strong>", age: <strong>{age}</strong></p>
      {/* Each useState call tracks ONE piece of state.
          React remembers them by the ORDER they are called.
          This is why hooks must not be called inside conditions or loops. */}
    </div>
  );
}

import SectionStepper from "../SectionStepper";
import BrokenCounter from "./BrokenCounter";
import WorkingCounter from "./WorkingCounter";
import StaleStateTrap from "./StaleStateTrap";
import MultipleStates from "./MultipleStates";

// ============================================================
// useState Demo — Understanding React State
// ============================================================
// This file teaches WHY React state exists, HOW it works,
// and common pitfalls students encounter.
// Each section mounts one at a time so the console stays clean.

const PRACTICAL = (
  <div className="demo-practical">
    <h3>When do you use useState in real apps?</h3>
    <ul>
      <li><strong>Form inputs</strong> — tracking what the user types (name, email, password)</li>
      <li><strong>Toggles</strong> — dark mode on/off, sidebar open/closed, modal visible/hidden</li>
      <li><strong>Counters</strong> — items in a shopping cart, notification badges, pagination</li>
      <li><strong>Loading/error states</strong> — showing a spinner while data loads, showing error messages</li>
      <li><strong>Selected items</strong> — which tab is active, which list item is highlighted</li>
      <li><strong>Any data that, when it changes, should update what the user sees</strong></li>
    </ul>
    <p className="demo-note">
      Rule of thumb: if the UI should change when a value changes, put it in state.
      If not (like a timer ID or a cache), use useRef instead.
    </p>
  </div>
);

const sections = [
  { label: "A. Broken Counter", content: <BrokenCounter /> },
  { label: "B. Working Counter", content: <WorkingCounter /> },
  { label: "C. Stale State Trap", content: <StaleStateTrap /> },
  { label: "D. Multiple States", content: <MultipleStates /> },
  { label: "Practical Use Cases", content: PRACTICAL },
];

export default function UseStateDemo() {
  return (
    <div className="demo-section">
      <h2>useState — Making React Aware of Changes</h2>
      <p className="demo-note">
        Open your browser console (F12 → Console) to see what happens behind the scenes.
        Use the section buttons below to step through each concept one at a time.
      </p>
      <SectionStepper sections={sections} />
    </div>
  );
}

import { useState } from "react";
import ReactVsJs from "./reactVsJs";
import UseStateDemo from "./useStateDemo";

const TABS = [
  { id: "reactVsJs", label: "React vs JS" },
  { id: "useState", label: "useState" },
];

function App() {
  const [activeDemo, setActiveDemo] = useState("reactVsJs");

  return (
    <div>
      <h1>CS300 React Demos</h1>
      <nav className="demo-nav">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            className={`btn ${activeDemo === tab.id ? "btn-active" : "btn-secondary"}`}
            onClick={() => {
              console.log("NAV: switching to", tab.id, "(previous component will unmount)");
              setActiveDemo(tab.id);
            }}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      {activeDemo === "reactVsJs" && <ReactVsJs />}
      {activeDemo === "useState" && <UseStateDemo />}
    </div>
  );
}

export default App;

git add -A
git commit -m "Add useState demo — broken counter, working counter, stale state, multiple states"
git push

useEffect(() => {
  // This code runs AFTER the screen updates
  console.log("effect!");

  return () => {
    // This cleanup code runs before the effect re-runs or on unmount
    console.log("cleanup!");
  };
}, [dependency]); // Controls WHEN the effect runs

import { useState, useEffect } from "react";

// ============================================================
// Section A: Render vs Effect Timing
// ============================================================
// Shows that the component function body runs FIRST (during rendering),
// and useEffect runs AFTER the browser paints the screen.
// Open the browser console to follow along!

export default function RenderVsEffect() {
  const [count, setCount] = useState(0);

  // 1️⃣ This runs DURING rendering (the function body)
  console.log("A. RENDER: component function is running, count =", count);

  // 2️⃣ This runs AFTER the browser paints the screen
  useEffect(() => {
    console.log("A. EFFECT: this runs AFTER the screen updated, count =", count);
  });

  return (
    <div className="demo-subsection">
      <h3>A. Render vs Effect Timing</h3>
      <p className="demo-note">
        Click the button and watch the console. "RENDER" logs first, then "EFFECT" logs after.
        The component function runs → React updates the DOM → browser paints → useEffect runs.
      </p>
      {console.log("A. JSX: inside the return statement, count =", count)}
      <p>Count: <strong>{count}</strong></p>
      <button className="btn btn-primary" onClick={() => setCount(prev => prev + 1)}>
        Increment (watch console order)
      </button>
    </div>
  );
}

import { useState, useEffect } from "react";

// ============================================================
// Section B: The Dependency Array
// ============================================================
// The second argument to useEffect controls WHEN the effect runs:
//   - No array    → runs after EVERY render
//   - Empty []    → runs ONCE on mount
//   - [x]         → runs when x changes
// Open the browser console to follow along!

export default function DependencyArray() {
  const [searchTerm, setSearchTerm] = useState("");
  const [clickCount, setClickCount] = useState(0);

  // No dependency array → runs after EVERY render
  useEffect(() => {
    console.log("B. EFFECT (no deps): runs after EVERY render");
  });

  // Empty array → runs ONCE when component first mounts
  useEffect(() => {
    console.log("B. EFFECT ([]): runs ONCE on mount");
  }, []);

  // [searchTerm] → runs when searchTerm changes
  useEffect(() => {
    console.log("B. EFFECT ([searchTerm]): searchTerm changed to", JSON.stringify(searchTerm));
  }, [searchTerm]);

  // [clickCount] → runs when clickCount changes
  useEffect(() => {
    console.log("B. EFFECT ([clickCount]): clickCount changed to", clickCount);
  }, [clickCount]);

  return (
    <div className="demo-subsection">
      <h3>B. The Dependency Array</h3>
      <p className="demo-note">
        Type in the input and click the button. Watch which effects fire in the console.
      </p>
      <div style={{ marginBottom: 8 }}>
        <label>Search: </label>
        <input
          type="text"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Type here..."
          style={{ padding: "4px 8px", marginLeft: 8 }}
        />
      </div>
      <button className="btn btn-secondary" onClick={() => setClickCount(prev => prev + 1)}>
        Click count: {clickCount}
      </button>
      <div className="demo-note" style={{ marginTop: 12 }}>
        <strong>Summary:</strong><br />
        • <code>useEffect(fn)</code> — no array → runs after every render<br />
        • <code>useEffect(fn, [])</code> — empty array → runs once on mount<br />
        • <code>useEffect(fn, [x])</code> — runs when x changes
      </div>
    </div>
  );
}

import { useState, useEffect } from "react";

// ============================================================
// Section C: Cleanup Functions
// ============================================================
// When a useEffect returns a function, that function runs:
//   1. When the component unmounts
//   2. Before the effect re-runs (if deps changed)
// This is how you prevent memory leaks from timers, subscriptions, etc.
// Open the browser console to follow along!
// NOTE: In development, React StrictMode runs effects twice. This is normal!

// A sub-component that runs a setInterval and cleans it up
function TickingClock() {
  const [ticks, setTicks] = useState(0);

  useEffect(() => {
    console.log("C. CLEANUP: ⏱️ starting interval (clock mounted)");

    const id = setInterval(() => {
      setTicks(prev => prev + 1);
      console.log("C. CLEANUP: ⏱️ tick");
    }, 1000);

    // This cleanup function runs:
    // 1. When the component unmounts
    // 2. Before the effect re-runs (if deps changed)
    return () => {
      console.log("C. CLEANUP: 🛑 clearing interval (clock unmounting)");
      clearInterval(id);
    };
  }, []); // Empty deps = mount once, cleanup on unmount

  return <p>Clock has ticked <strong>{ticks}</strong> times</p>;
}

export default function CleanupDemo() {
  const [showClock, setShowClock] = useState(false);

  return (
    <div className="demo-subsection">
      <h3>C. Cleanup Functions</h3>
      <p className="demo-note">
        Toggle the clock on/off. Watch the console — "starting interval" on mount, "clearing interval" on unmount.
        Cleanup prevents memory leaks!
      </p>
      <button
        className="btn btn-primary"
        onClick={() => {
          console.log("C. CLEANUP: toggling clock", showClock ? "OFF" : "ON");
          setShowClock(prev => !prev);
        }}
      >
        {showClock ? "Hide Clock (unmount)" : "Show Clock (mount)"}
      </button>
      {showClock && <TickingClock />}
      {/* When showClock becomes false, React unmounts TickingClock.
          The cleanup function inside its useEffect runs, clearing the interval.
          Without cleanup, the interval would keep running forever! */}
    </div>
  );
}

import { useState, useEffect } from "react";

// ============================================================
// Section D: Debounced Search (Practical Pattern)
// ============================================================
// A common real-world pattern: wait for the user to STOP typing
// before performing an expensive operation (like an API call).
// useEffect + cleanup makes this elegant.
// Open the browser console to follow along!

export default function DebouncedSearch() {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebouncedQuery] = useState("");

  useEffect(() => {
    // Set a timer to "search" after 500ms of no typing
    console.log("D. DEBOUNCE: setting 500ms timer for", JSON.stringify(query));

    const timerId = setTimeout(() => {
      console.log("D. DEBOUNCE: ✅ Timer fired! Searching for:", JSON.stringify(query));
      setDebouncedQuery(query);
    }, 500);

    // Cleanup: if the user types again before 500ms, cancel the old timer
    return () => {
      console.log("D. DEBOUNCE: ❌ Cancelled timer (user typed again)");
      clearTimeout(timerId);
    };
    // This effect runs every time query changes.
    // The cleanup cancels the PREVIOUS timer before starting a new one.
    // Result: only the LAST keystroke (after 500ms pause) triggers the "search."
  }, [query]);

  return (
    <div className="demo-subsection">
      <h3>D. Debounced Search (Practical Pattern)</h3>
      <p className="demo-note">
        Type quickly, then stop. Only the final value gets "searched" after 500ms. Watch the console!
      </p>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Type a search query..."
        style={{ padding: "8px 12px", fontSize: 16, width: "100%", maxWidth: 300, boxSizing: "border-box" }}
      />
      <p>You typed: <strong>{query}</strong></p>
      <p>Debounced (searched) value: <strong>{debouncedQuery || "(waiting...)"}</strong></p>
    </div>
  );
}