React

import { useState, useReducer } from "react";

// useState
const [count, setCount] = useState(0);
const [user, setUser] = useState<User | null>(null);

// Functional update (safe for async)
setCount(prev => prev + 1);

// useReducer for complex state
type Action = { type: "inc" } | { type: "dec" } | { type: "reset" };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "inc": return state + 1;
    case "dec": return state - 1;
    case "reset": return 0;
  }
}

const [count, dispatch] = useReducer(reducer, 0);
dispatch({ type: "inc" });

import { useEffect, useState } from "react";

// Run after every render
useEffect(() => { document.title = `Count: ${count}`; });

// Run once on mount
useEffect(() => {
  fetchUser(id).then(setUser);
}, []);

// Run when deps change
useEffect(() => {
  const sub = subscribe(userId);
  return () => sub.unsubscribe(); // Cleanup!
}, [userId]);

// ✅ Better: use async function inside
useEffect(() => {
  async function load() {
    const data = await fetchUser(id);
    setUser(data);
  }
  load();
}, [id]);

import { useMemo, useCallback } from "react";

// useMemo: memoize expensive computation
const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// useCallback: stable function reference
const handleClick = useCallback(
  (id: number) => dispatch({ type: "remove", id }),
  [dispatch]
);

// ✅ Use when passing to memoized child
const Child = React.memo(({ onClick }) => (
  <button onClick={onClick}>Click</button>
));

function Badge({ label, tone = 'info' }) {
  return <span className={`badge badge--${tone}`}>{label}</span>;
}

export default function UserCard({ user }) {
  return (
    <article className="card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <Badge label={user.role} tone={user.role === 'Admin' ? 'success' : 'info'} />
    </article>
  );
}

function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => onToggle(todo.id)}
            />
            {todo.title}
          </label>
        </li>
      ))}
    </ul>
  );
}

function OrdersPanel({ isLoading, error, orders }) {
  if (isLoading) return <p>Loading orders…</p>;
  if (error) return <p role="alert">Failed to load orders.</p>;
  if (orders.length === 0) return <p>No orders yet.</p>;

  return (
    <ul>
      {orders.map((o) => (
        <li key={o.id}>#{o.id} — {o.status}</li>
      ))}
    </ul>
  );
}

import { useState, useEffect } from "react";

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetch(url)
      .then(r => r.json())
      .then(d => { if (!cancelled) setData(d); })
      .catch(e => { if (!cancelled) setError(e); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

// Usage
const { data: user, loading } = useFetch<User>(`/api/users/${id}`);

import { createContext, useContext, useState } from "react";

interface ThemeCtx { theme: string; toggle: () => void; }
const ThemeContext = createContext<ThemeCtx | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState("light");
  const toggle = () => setTheme(t => t === "light" ? "dark" : "light");
  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme must be inside ThemeProvider");
  return ctx;
}

import { useState } from 'react';

export default function QuantitySelector() {
  const [qty, setQty] = useState(1);

  return (
    <div>
      <button onClick={() => setQty((q) => Math.max(1, q - 1))}>-</button>
      <span>{qty}</span>
      <button onClick={() => setQty((q) => q + 1)}>+</button>
    </div>
  );
}

import { useEffect, useState } from 'react';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let ignore = false;

    async function load() {
      setLoading(true);
      const res = await fetch('/api/products');
      const data = await res.json();
      if (!ignore) setProducts(data);
      if (!ignore) setLoading(false);
    }

    load();
    return () => { ignore = true; };
  }, []);

  if (loading) return <p>Loading…</p>;
  return <pre>{JSON.stringify(products, null, 2)}</pre>;
}

import { useEffect, useState } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const onOnline = () => setIsOnline(true);
    const onOffline = () => setIsOnline(false);
    window.addEventListener('online', onOnline);
    window.addEventListener('offline', onOffline);
    return () => {
      window.removeEventListener('online', onOnline);
      window.removeEventListener('offline', onOffline);
    };
  }, []);

  return isOnline;
}

export default function StatusBanner() {
  const isOnline = useOnlineStatus();
  return <p>{isOnline ? '🟢 Online' : '🔴 Offline'}</p>;
}

import { useState } from 'react';

export default function SignupForm() {
  const [form, setForm] = useState({ email: '', password: '' });

  function onChange(e) {
    const { name, value } = e.target;
    setForm((f) => ({ ...f, [name]: value }));
  }

  function onSubmit(e) {
    e.preventDefault();
    console.log('submit', form);
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="email" value={form.email} onChange={onChange} placeholder="Email" />
      <input name="password" type="password" value={form.password} onChange={onChange} placeholder="Password" />
      <button type="submit">Create account</button>
    </form>
  );
}

import { useState } from 'react';

export default function ProfileForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    if (name.trim().length < 2) {
      setError('Name must be at least 2 characters');
      return;
    }
    setError('');
    // await fetch('/api/profile', { method: 'POST', body: JSON.stringify({ name }) })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      {error && <p role="alert">{error}</p>}
      <button>Save</button>
    </form>
  );
}

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function Layout() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link> | <Link to="/products/42">Product</Link>
      </nav>
      <hr />
    </>
  );
}

function ProductPage() {
  const { productId } = useParams();
  return <h2>Product #{productId}</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Layout />
      <Routes>
        <Route path="/" element={<h1>Home</h1>} />
        <Route path="/products/:productId" element={<ProductPage />} />
      </Routes>
    </BrowserRouter>
  );
}

import { useMemo, useState } from 'react';

function filterProducts(products, query) {
  console.log('Filtering...');
  return products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()));
}

export default function SearchableProducts({ products }) {
  const [query, setQuery] = useState('');
  const filtered = useMemo(() => filterProducts(products, query), [products, query]);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search" />
      <p>{filtered.length} results</p>
    </>
  );
}

import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const ReportsPage = lazy(() => import('./ReportsPage'));

export default function AppRoutes() {
  return (
    <Suspense fallback={<p>Loading page…</p>}>
      <Routes>
        <Route path="/reports" element={<ReportsPage />} />
      </Routes>
    </Suspense>
  );
}

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('UI error:', error, info);
    // Send to Sentry/Datadog/etc.
  }

  render() {
    if (this.state.hasError) return <h2>Something went wrong.</h2>;
    return this.props.children;
  }
}

export default ErrorBoundary;