React.js
Intermediate Guide

// Custom hook: useLocalStorage
import { useState } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const set = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, set];
}

// Usage — reads/writes to localStorage automatically
function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "dark");
  return <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
    Current: {theme}
  </button>;
}

// useFetch — a minimal data-fetching hook
function useFetch(url) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// 1. Create the context + a custom hook for it
import { createContext, useContext, useState } from "react";

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("dark");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// 2. Wrap your app
function App() {
  return (
    <ThemeProvider>
      <Navbar />
      <Main />
    </ThemeProvider>
  );
}

// 3. Consume anywhere in the tree
function Navbar() {
  const { theme, setTheme } = useTheme();
  return <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
    Toggle theme
  </button>;
}

import { useReducer } from "react";

// The reducer: pure function (state, action) => newState
function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, items: [...state.items, action.item], total: state.total + action.item.price };
    case "REMOVE_ITEM":
      return { ...state, items: state.items.filter(i => i.id !== action.id) };
    case "CLEAR":
      return { items: [], total: 0 };
    default:
      return state;
  }
}

function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, { items: [], total: 0 });

  return (
    <div>
      <p>{cart.items.length} items — £{cart.total}</p>
      <button onClick={() => dispatch({ type: "CLEAR" })}>Clear cart</button>
    </div>
  );
}

import { memo, useMemo, useCallback, useState } from "react";

// React.memo — skip re-render if props are the same
const ExpensiveList = memo(function ExpensiveList({ items }) {
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
});

function App() {
  const [filter, setFilter] = useState("");
  const rawItems = useLargeDataset();

  // useMemo — only refilter when rawItems or filter changes
  const filtered = useMemo(
    () => rawItems.filter(i => i.name.includes(filter)),
    [rawItems, filter]
  );

  // useCallback — stable reference for the handler
  const handleSelect = useCallback((id) => {
    console.log("selected", id);
  }, []); // no deps — never recreated

  return <ExpensiveList items={filtered} onSelect={handleSelect} />;
}

import { lazy, Suspense } from "react";

// Load HeavyDashboard only when it's actually rendered
const HeavyDashboard = lazy(() => import("./HeavyDashboard"));

function App() {
  return (
    <Suspense fallback=<p>Loading...</p>>
      <HeavyDashboard />
    </Suspense>
  );
}

// Manual approach with loading + error state
function UserProfile({ userId }) {
  const [user, setUser]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(`/api/users/${userId}`)
      .then(res => {
        if (!res.ok) throw new Error("Not found");
        return res.json();
      })
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error)   return <p>Error: {error.message}</p>;
  return <h2>{user.name}</h2>;
}

import { useQuery } from "@tanstack/react-query";

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error)     return <p>Error</p>;
  return <h2>{user.name}</h2>;
}

// Tabs built as compound components
const TabsContext = createContext(null);

function Tabs({ children, defaultTab }) {
  const [active, setActive] = useState(defaultTab);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
}

Tabs.Tab = function Tab({ id, children }) {
  const { active, setActive } = useContext(TabsContext);
  return <button onClick={() => setActive(id)} className={active === id ? "active" : ""}>
    {children}
  </button>;
};

Tabs.Panel = function Panel({ id, children }) {
  const { active } = useContext(TabsContext);
  return active === id ? <div>{children}</div> : null;
};

// Usage
<Tabs defaultTab="a">
  <Tabs.Tab id="a">Overview</Tabs.Tab>
  <Tabs.Tab id="b">Details</Tabs.Tab>
  <Tabs.Panel id="a">Overview content</Tabs.Panel>
  <Tabs.Panel id="b">Details content</Tabs.Panel>
</Tabs>

// A mouse-position tracker via render prop
function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

// Usage
<MouseTracker render={pos => <p>x: {pos.x}, y: {pos.y}</p>} />

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/"         element=<Home /> />
        <Route path="/about"    element=<About /> />
        <Route path="/user/:id" element=<User /> />
        <Route path="*"         element=<NotFound /> />
      </Routes>
    </BrowserRouter>
  );
}

// Reading URL params
function User() {
  const { id } = useParams();
  return <h1>User {id}</h1>;
}

function ProtectedRoute({ children }) {
  const { user } = useAuth(); // your auth hook
  if (!user) return <Navigate to="/login" replace />;
  return children;
}

// Usage
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />

// React Hook Form example
import { useForm } from "react-hook-form";

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+$/i, message: "Invalid email" }
        })}
        placeholder="Email"
      />
      {errors.email && <p>{errors.email.message}</p>}

      <input
        {...register("password", { required: true, minLength: 8 })}
        type="password"
        placeholder="Password"
      />

      <button type="submit">Sign up</button>
    </form>
  );
}

import { render, screen, fireEvent } from "@testing-library/react";
import { Counter } from "./Counter";

describe("Counter", () => {
  it("starts at zero", () => {
    render(<Counter />);
    expect(screen.getByText("Count: 0")).toBeInTheDocument();
  });

  it("increments when button is clicked", () => {
    render(<Counter />);
    fireEvent.click(screen.getByRole("button", { name: /add one/i }));
    expect(screen.getByText("Count: 1")).toBeInTheDocument();
  });
});