Week 10 Session 2: Composition, Lifecycle, Hooks & Thinking in React

# Old workflow (HTML/CSS projects):
# 1. Create repo on GitHub WITH README ✅
# 2. Clone it → folder has README
# 3. Start coding

# React problem:
# npm create vite@latest my-app -- --template react
# ❌ Error: directory is not empty (has README)

# Step 1: Create the Vite project
npm create vite@latest my-react-app -- --template react

# Step 2: Enter the project and install dependencies
cd my-react-app
npm install

# Step 3: Vite already created a .gitignore for you!
# (includes node_modules/, dist/, .env, etc.)

# Step 4: Initialize Git
git init

# Step 5: First commit
git add .
git commit -m "Initial commit: Vite React setup"

# Step 6: Create an EMPTY repo on GitHub
# ⚠️ Do NOT check "Add a README" or "Add .gitignore"

# Step 7: Connect to GitHub
git remote add origin git@github.com:your-username/my-react-app.git

# Step 8: Push
git push -u origin main

git clone git@github.com:team/project.git
cd project
npm install    # Installs node_modules locally (not in repo)
npm run dev    # Start development server

function Panel({ header, footer, children }) {
  return (
    <div className="panel">
      <div className="panel-header">{header}</div>
      <div className="panel-body">{children}</div>
      <div className="panel-footer">{footer}</div>
    </div>
  );
}

// Three separate content areas!
<Panel
  header={<h2>User Settings</h2>}
  footer={<button>Save Changes</button>}
>
  <p>Update your profile information below.</p>
  <form>...</form>
</Panel>

function Button({ variant = "primary", children, onClick }) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

// Specialized version — preset props
function DangerButton({ children, onClick }) {
  return <Button variant="danger" onClick={onClick}>{children}</Button>;
}

// Container — owns state and logic
function ProductCatalog() {
  const [search, setSearch] = useState("");
  const filtered = products.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase())
  );
  return <ProductList products={filtered} />;
}

// Presentational — pure display
function ProductList({ products }) {
  return (
    <div className="grid">
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  );
}

import { useState, useEffect } from 'react';

function LifecycleDemo() {
  const [count, setCount] = useState(0);

  // Runs ONCE when the component mounts
  useEffect(() => {
    console.log("1. MOUNT: Component appeared on screen");

    return () => {
      console.log("3. UNMOUNT: Component is being removed");
    };
  }, []);

  // Runs every time count changes
  useEffect(() => {
    console.log(`2. UPDATE: count changed to ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? "Hide" : "Show"} LifecycleDemo
      </button>
      {show && <LifecycleDemo />}
    </div>
  );
}

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// Runs ONCE — when the component first appears (mount)
useEffect(() => {
  console.log("Component mounted!");
}, []);

// Runs when `count` changes (mount + updates)
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

// Runs on EVERY render (rarely what you want)
useEffect(() => {
  console.log("Rendered!");
});

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count changed to: ${count}`);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

function Counter() {
  const [count, setCount] = useState(() => {
    return Number(localStorage.getItem('count')) || 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("React");

  // Effect 1: Update document title (depends on count and name)
  useEffect(() => {
    document.title = `${name} - Count: ${count}`;
  }, [count, name]);

  // Effect 2: Log on mount only
  useEffect(() => {
    console.log("App mounted!");
  }, []);

  // ...
}

useEffect(() => {
  // Setup: runs when the effect fires
  const connection = createConnection();

  return () => {
    // Cleanup: runs before the next effect OR when unmounting
    connection.close();
  };
}, [dependency]);

import { useState, useEffect } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    // Setup: add the listener
    function handleResize() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', handleResize);

    // Cleanup: remove the listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty deps = setup once on mount, cleanup on unmount

  return <p>Window width: {width}px</p>;
}

function DelayedMessage({ message, delay }) {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const timerId = setTimeout(() => {
      setShow(true);
    }, delay);

    return () => clearTimeout(timerId); // Cancel if component unmounts early
  }, [message, delay]);

  return show ? <p>{message}</p> : <p>Waiting...</p>;
}

import { useRef } from 'react';

const myRef = useRef(initialValue);
// Access: myRef.current
// Update: myRef.current = newValue (no re-render!)

import { useRef } from 'react';

function SearchBar() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();  // Direct DOM access!
  }

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Search..." />
      <button onClick={handleClick}>Focus Search</button>
    </div>
  );
}

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
    console.log(`Render #${renderCount.current}`);
  });

  return <p>Seconds: {seconds}</p>;
}

import { useState, useRef } from 'react';

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(false);
  const intervalRef = useRef(null);  // Store the timer ID

  function start() {
    setRunning(true);
    intervalRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  }

  function stop() {
    clearInterval(intervalRef.current);  // Use the stored ID to stop
    intervalRef.current = null;
    setRunning(false);
  }

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={running ? stop : start}>
        {running ? "Stop" : "Start"}
      </button>
    </div>
  );
}

import { useState, useEffect, useRef } from 'react';

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(false);
  const intervalRef = useRef(null);

  useEffect(() => {
    if (running) {
      // Setup: start the interval
      intervalRef.current = setInterval(() => {
        setSeconds(prev => prev + 1);
      }, 1000);
    }

    // Cleanup: clear the interval
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [running]); // Re-runs when running changes

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={() => setRunning(r => !r)}>
        {running ? "Stop" : "Start"}
      </button>
    </div>
  );
}

function ChatMessages({ messages }) {
  const bottomRef = useRef(null);

  useEffect(() => {
    // Scroll to the bottom whenever messages change
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]); // Runs when messages array changes

  return (
    <div className="chat">
      {messages.map((msg, i) => (
        <p key={i}>{msg}</p>
      ))}
      <div ref={bottomRef} /> {/* Invisible anchor at bottom */}
    </div>
  );
}

import { useState, useEffect, useRef } from 'react';

function SearchPage() {
  // useState: track the search text and filtered results
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  // useRef: access the input DOM element for focusing
  const inputRef = useRef(null);

  // useRef: store the debounce timer ID (no re-render needed)
  const timerRef = useRef(null);

  // Data to search through
  const allItems = [
    "React Hooks Guide",
    "CSS Grid Layout",
    "JavaScript Promises",
    "HTML Semantic Elements",
    "Responsive Design Patterns",
    "Git Branch Strategies",
  ];

  // useEffect: auto-focus the search input on mount
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  // useEffect: update document title after user stops typing (debounce)
  useEffect(() => {
    // Clear any existing timer
    clearTimeout(timerRef.current);

    // Set a new timer — only updates title after 500ms of no typing
    timerRef.current = setTimeout(() => {
      if (query) {
        document.title = `Search: ${query}`;
      } else {
        document.title = "Search Page";
      }
    }, 500);

    // Cleanup: cancel the timer if query changes again before 500ms
    return () => clearTimeout(timerRef.current);
  }, [query]);

  // Derived state: filter results during render (NOT in useEffect)
  const filtered = query
    ? allItems.filter(item =>
        item.toLowerCase().includes(query.toLowerCase())
      )
    : allItems;

  return (
    <div>
      <h1>Search</h1>
      <input
        ref={inputRef}
        type="text"
        placeholder="Search articles..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <p>{filtered.length} result{filtered.length !== 1 ? "s" : ""}</p>
      <ul>
        {filtered.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchPage;