React – Concepts Overview

import { useState, useEffect, useLayoutEffect, useRef } from "react";

function Timing() {
  const [count, setCount] = useState(0);
  const renderCountRef = useRef(0);

  renderCountRef.current++;
  console.log("1) Render phase – function body runs, count =", count);

  useLayoutEffect(() => {
    console.log("2) useLayoutEffect – runs synchronously BEFORE the paint");
    return () => console.log("   Cleanup of useLayoutEffect (before next layout effect / on unmount)");
  }, [count]);

  useEffect(() => {
    console.log("3) useEffect – runs AFTER the paint (asynchronous)");
    return () => console.log("   Cleanup of useEffect (before next effect / on unmount)");
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicks: {count}
    </button>
  );
}
export default Timing;

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Value: {count}
    </button>
  );
}

function DocumentTitle({ unreadCount }) {
  useEffect(() => {
    document.title = unreadCount > 0 ? `(${unreadCount}) Inbox` : "Inbox";
  }, [unreadCount]);

  return <p>Unread: {unreadCount}</p>;
}

function Tooltip({ text }) {
  const ref = useRef(null);
  const [offsetTop, setOffsetTop] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setOffsetTop(-(height + 8)); // correct the position BEFORE the paint
  }, [text]);

  return (
    <div ref={ref} style={{ position: "absolute", top: offsetTop }}>
      {text}
    </div>
  );
}

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={`btn btn-${theme}`}>Click me</button>;
}

function ProductList({ products, query }) {
  const filtered = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())),
    [products, query]
  );

  return (
    <ul>
      {filtered.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

const SubmitButton = React.memo(function SubmitButton({ onClick }) {
  console.log("SubmitButton renders");
  return <button onClick={onClick}>Submit</button>;
});

function Form() {
  const [text, setText] = useState("");

  // Without useCallback, a new function would be created on every
  // keystroke, causing SubmitButton to re-render despite React.memo.
  const handleSubmit = useCallback(() => {
    console.log("sent");
  }, []);

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <SubmitButton onClick={handleSubmit} />
    </>
  );
}

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

  useEffect(() => {
    inputRef.current.focus(); // direct DOM access, no re-render needed
  }, []);

  return <input ref={inputRef} placeholder="Focus lands here automatically" />;
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </>
  );
}

function SearchableList({ items }) {
  const [query, setQuery] = useState("");
  const [filtered, setFiltered] = useState(items);
  const [isPending, startTransition] = useTransition();

  function handleChange(event) {
    const value = event.target.value;
    setQuery(value); // urgent: show immediately in the input

    startTransition(() => {
      // low priority: allowed to be delayed/interrupted
      setFiltered(items.filter((i) => i.includes(value)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Updating list…</span>}
      <ul>
        {filtered.map((i) => (
          <li key={i}>{i}</li>
        ))}
      </ul>
    </>
  );
}

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue((v) => !v), []);
  return [value, toggle];
}

// Usage:
function Accordion() {
  const [isOpen, toggleOpen] = useToggle(false);
  return (
    <>
      <button onClick={toggleOpen}>{isOpen ? "Close" : "Open"}</button>
      {isOpen && <p>Content…</p>}
    </>
  );
}

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

const TabsContext = createContext(null);

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

function TabList({ children }) {
  return <div className="tab-list" role="tablist">{children}</div>;
}

function Tab({ value, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
    <button
      role="tab"
      aria-selected={active === value}
      onClick={() => setActive(value)}
    >
      {children}
    </button>
  );
}

function TabPanel({ value, children }) {
  const { active } = useContext(TabsContext);
  if (active !== value) return null;
  return <div role="tabpanel">{children}</div>;
}

// "Composed" API: Tabs.List, Tabs.Tab, Tabs.Panel
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;

export default Tabs;

// Usage:
// <Tabs defaultValue="general">
//   <Tabs.List>
//     <Tabs.Tab value="general">General</Tabs.Tab>
//     <Tabs.Tab value="security">Security</Tabs.Tab>
//   </Tabs.List>
//   <Tabs.Panel value="general">General content</Tabs.Panel>
//   <Tabs.Panel value="security">Security content</Tabs.Panel>
// </Tabs>

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Value: {count}
    </button>
  );
}
export default Counter;

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

const ThemeContext = createContext("light");

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

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

// Usage in any descendant component:
function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Current theme: {theme}
    </button>
  );
}

import { create } from "zustand";

export const useCartStore = create((set) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({ items: [...state.items, item] })),
  clear: () => set({ items: [] }),
}));

// Usage in ANY component, with no provider wrapper at all:
function CartBadge() {
  const itemCount = useCartStore((state) => state.items.length);
  return <span className="badge">{itemCount}</span>;
}

import { BrowserRouter, Routes, Route, Link, Outlet, useNavigate } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<Users />}>
            <Route path=":userId" element={<UserDetail />} />
          </Route>
          <Route path="contact" element={<ContactForm />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Layout() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/users">Users</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      {/* Outlet renders whichever child route currently matches (nested routes) */}
      <Outlet />
    </div>
  );
}

function ContactForm() {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    // ... submit the form ...
    navigate("/"); // redirect after a successful submit
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };

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

  componentDidCatch(error, info) {
    console.error("Unexpected error:", error, info);
  }

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

export default ErrorBoundary;

// Usage:
// <ErrorBoundary fallback={<p>Unfortunately, this view has crashed.</p>}>
//   <Dashboard />
// </ErrorBoundary>

function SaveButton({ data }) {
  async function handleClick() {
    try {
      const response = await fetch("/api/save", {
        method: "POST",
        body: JSON.stringify(data),
        headers: { "Content-Type": "application/json" },
      });
      if (!response.ok) throw new Error("Save failed: " + response.status);
      alert("Saved!");
    } catch (error) {
      console.error(error);
      alert("Error while saving: " + error.message);
    }
  }

  return <button onClick={handleClick}>Save</button>;
}

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

function UserProfile({ userId }) {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["user", userId],
    queryFn: () =>
      fetch(`/api/users/${userId}`).then((res) => {
        if (!res.ok) throw new Error("User not found");
        return res.json();
      }),
  });

  if (isLoading) return <p>Loading…</p>;
  if (isError) return <p>Error: {error.message}</p>;
  return <p>{data.name}</p>;
}

function UserCard({ user, isAdmin, permissions }) {
  return (
    <>
      <h3>{user.name}</h3>

      {isAdmin && <span className="badge">Admin</span>}

      {user.active ? (
        <span className="status ok">Active</span>
      ) : (
        <span className="status inactive">Inactive</span>
      )}

      <ul>
        {permissions.map((p) => (
          <li key={p.id}>{p.label}</li>
        ))}
      </ul>
    </>
  );
}

import { useEffect, useState } from "react";

function UserList({ searchTerm }) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function loadUsers() {
      setLoading(true);
      setError(null);
      try {
        const res = await fetch(`/api/users?q=${searchTerm}`, {
          signal: controller.signal,
        });
        if (!res.ok) throw new Error("Server error: " + res.status);
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        if (err.name !== "AbortError") setError(err);
      } finally {
        setLoading(false);
      }
    }

    loadUsers();

    // Cleanup: abort the in-flight request if searchTerm changes
    // or the component unmounts
    return () => controller.abort();
  }, [searchTerm]);

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

import { useState } from "react";
import { Outlet, Link } from "react-router-dom";

// --- Layout ---
function AppLayout() {
  return (
    <div className="app">
      <header>
        <Link to="/feedback">Feedback</Link>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

// --- Route with form ---
function FeedbackPage() {
  const [message, setMessage] = useState("");
  const [submittedList, setSubmittedList] = useState([]);
  const [status, setStatus] = useState("idle"); // idle | sending | done | error

  async function handleSubmit(event) {
    event.preventDefault();
    if (!message.trim()) return;

    setStatus("sending");
    try {
      const res = await fetch("/api/feedback", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message }),
      });
      if (!res.ok) throw new Error("Send failed");

      // Update state: add the new message to the list
      setSubmittedList((prev) => [...prev, message]);
      setMessage("");
      setStatus("done");
    } catch {
      setStatus("error");
    }
  }

  return (
    <section>
      <h1>Feedback</h1>

      <form onSubmit={handleSubmit}>
        <label htmlFor="message">Your message</label>
        <textarea
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button type="submit" disabled={status === "sending"}>
          {status === "sending" ? "Sending…" : "Submit"}
        </button>
      </form>

      {status === "done" && <p>Thank you for your feedback!</p>}
      {status === "error" && <p>An error occurred.</p>}

      <h2>Previous messages in this session</h2>
      <ul>
        {submittedList.map((msg, i) => (
          <li key={i}>{msg}</li>
        ))}
      </ul>
    </section>
  );
}

export { AppLayout, FeedbackPage };

// Wiring into the routes (see section 6):
// <Route path="/" element={<AppLayout />}>
//   <Route path="feedback" element={<FeedbackPage />} />
// </Route>

import { useRef } from "react";

function CollapsibleNoState({ children }) {
  const panelRef = useRef(null);

  function toggle() {
    // Direct DOM manipulation – React knows nothing about this, there is no re-render
    panelRef.current.classList.toggle("hidden");
  }

  return (
    <div>
      <button onClick={toggle}>Show/hide</button>
      <div ref={panelRef} className="panel">
        {children}
      </div>
    </div>
  );
}

import { useState } from "react";

function CollapsibleWithState({ children }) {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <button onClick={() => setOpen((o) => !o)}>Show/hide</button>
      {open && <div className="panel">{children}</div>}
    </div>
  );
}

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

// Validation rules, analogous to Bean Validation annotations (@NotNull, @Email, @Size ...)
const schema = z.object({
  username: z.string().min(3, "At least 3 characters").max(20, "At most 20 characters"),
  email: z.string().email("Invalid email address"),
  age: z
    .number({ invalid_type_error: "Please enter a number" })
    .int()
    .min(18, "Minimum age is 18"),
});

function RegisterForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: { username: "", email: "", age: 18 },
  });

  async function onValid(data) {
    await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
  }

  return (
    <form onSubmit={handleSubmit(onValid)}>
      <label>
        Username
        <input {...register("username")} />
      </label>
      {errors.username && <p className="error">{errors.username.message}</p>}

      <label>
        Email
        <input type="email" {...register("email")} />
      </label>
      {errors.email && <p className="error">{errors.email.message}</p>}

      <label>
        Age
        <input type="number" {...register("age", { valueAsNumber: true })} />
      </label>
      {errors.age && <p className="error">{errors.age.message}</p>}

      <button type="submit" disabled={isSubmitting}>Register</button>
    </form>
  );
}

export default RegisterForm;

import { useEffect, useState } from "react";

/**
 * Delays adopting a value by `delay` milliseconds.
 * Useful e.g. for live search fields, to avoid firing a
 * request on every single keystroke.
 */
function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cleanup: discard the old timer if value/delay
    // change again before the time has elapsed
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

import { useState, useEffect } from "react";
import useDebounce from "./useDebounce";

function SearchBox() {
  const [input, setInput] = useState("");
  const debouncedInput = useDebounce(input, 400);

  useEffect(() => {
    if (!debouncedInput) return;
    fetch(`/api/search?q=${debouncedInput}`);
    // ... process the result ...
  }, [debouncedInput]);

  return (
    <input
      value={input}
      onChange={(e) => setInput(e.target.value)}
      placeholder="Search…"
    />
  );
}

import { useState } from "react";

function FileUpload() {
  const [file, setFile] = useState(null);
  const [status, setStatus] = useState("idle");

  function handleFileChange(event) {
    const selected = event.target.files?.[0] ?? null;
    setFile(selected);
  }

  async function handleUpload() {
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    setStatus("uploading");
    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData, // Do NOT set Content-Type manually – the browser
                         // automatically adds the correct multipart boundary header
      });
      if (!res.ok) throw new Error("Upload failed");
      setStatus("done");
    } catch (err) {
      console.error(err);
      setStatus("error");
    }
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {file && <p>Selected: {file.name} ({Math.round(file.size / 1024)} KB)</p>}
      <button onClick={handleUpload} disabled={!file || status === "uploading"}>
        Upload
      </button>
      {status === "done" && <p>Upload successful!</p>}
      {status === "error" && <p>Error during upload.</p>}
    </div>
  );
}

export default FileUpload;

import { useParams, useSearchParams, Link } from "react-router-dom";

// Route: <Route path="/products/:productId" element={<ProductDetail />} />
// Example URL called: /products/42?tab=reviews

function ProductDetail() {
  const { productId } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab = searchParams.get("tab") ?? "info";

  function selectTab(tab) {
    setSearchParams({ tab }); // updates the URL without reloading the page
  }

  return (
    <div>
      <h1>Product #{productId}</h1>

      <nav>
        <button onClick={() => selectTab("info")}>Info</button>
        <button onClick={() => selectTab("reviews")}>Reviews</button>
      </nav>

      {activeTab === "info" && <p>Product information for {productId}…</p>}
      {activeTab === "reviews" && <p>Reviews for {productId}…</p>}

      <Link to={`/products/${productId}?tab=reviews`}>
        Direct link to the reviews
      </Link>
    </div>
  );
}

export default ProductDetail;

// Button.module.css
// .primary { background: royalblue; color: white; }

import styles from "./Button.module.css";

function Button({ children }) {
  return <button className={styles.primary}>{children}</button>;
}

import styled from "styled-components";

const PrimaryButton = styled.button`
  background: ${(props) => (props.$danger ? "crimson" : "royalblue")};
  color: white;
  padding: 8px 16px;
`;

function Button({ children, danger }) {
  return <PrimaryButton $danger={danger}>{children}</PrimaryButton>;
}

import logoUrl from "./assets/logo.png"; // Build tool provides a (possibly hashed) URL

function Header() {
  return <img src={logoUrl} alt="Company logo" width={120} />;
}

import { lazy, Suspense } from "react";

const AdminPanel = lazy(() => import("./AdminPanel.jsx"));

function App() {
  return (
    <Suspense fallback={<p>Loading admin area…</p>}>
      <AdminPanel />
    </Suspense>
  );
}

{
  "greeting": "Hallo, {{name}}!",
  "nav": { "home": "Start", "contact": "Kontakt" }
}

{
  "greeting": "Hello, {{name}}!",
  "nav": { "home": "Home", "contact": "Contact" }
}

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import de from "./locales/de/translation.json";
import en from "./locales/en/translation.json";

i18n.use(initReactI18next).init({
  resources: { de: { translation: de }, en: { translation: en } },
  lng: "de",
  fallbackLng: "en",
  interpolation: { escapeValue: false },
});

export default i18n;

import { useTranslation } from "react-i18next";

function Greeting({ userName }) {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <p>{t("greeting", { name: userName })}</p>
      <nav>
        <a href="/">{t("nav.home")}</a>
        <a href="/contact">{t("nav.contact")}</a>
      </nav>

      <button onClick={() => i18n.changeLanguage("de")}>DE</button>
      <button onClick={() => i18n.changeLanguage("en")}>EN</button>
    </div>
  );
}

import { useState, useEffect } from "react";

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

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Usage: const [draft, setDraft] = usePersistentState("feedback-draft", "");

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useSettingsStore = create(
  persist(
    (set) => ({
      theme: "light",
      setTheme: (theme) => set({ theme }),
    }),
    { name: "app-settings" } // localStorage key
  )
);

function getCsrfToken() {
  return document
    .querySelector('meta[name="csrf-token"]')
    ?.getAttribute("content");
}

async function apiPost(url, body) {
  return fetch(url, {
    method: "POST",
    credentials: "include", // send the session cookie along
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": getCsrfToken(),
    },
    body: JSON.stringify(body),
  });
}

export { apiPost };

import { useReducer } from "react";

const initialState = { step: 1, data: { name: "", email: "", plan: "" } };

function reducer(state, action) {
  switch (action.type) {
    case "NEXT_STEP":
      return { ...state, step: state.step + 1 };
    case "PREV_STEP":
      return { ...state, step: state.step - 1 };
    case "UPDATE_FIELD":
      return { ...state, data: { ...state.data, [action.field]: action.value } };
    default:
      return state;
  }
}

function RegistrationWizard() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      {state.step === 1 && (
        <input
          placeholder="Name"
          value={state.data.name}
          onChange={(e) => dispatch({ type: "UPDATE_FIELD", field: "name", value: e.target.value })}
        />
      )}
      {state.step === 2 && (
        <input
          placeholder="Email"
          value={state.data.email}
          onChange={(e) => dispatch({ type: "UPDATE_FIELD", field: "email", value: e.target.value })}
        />
      )}
      {state.step === 3 && <p>Summary: {state.data.name}, {state.data.email}</p>}

      {state.step > 1 && <button onClick={() => dispatch({ type: "PREV_STEP" })}>Back</button>}
      {state.step < 3 && <button onClick={() => dispatch({ type: "NEXT_STEP" })}>Next</button>}
    </div>
  );
}

import { useEffect, useState } from "react";

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    console.log("Connecting to room", roomId);
    const connection = createConnection(roomId); // fictional API
    connection.on("message", (msg) => setMessages((m) => [...m, msg]));
    connection.connect();

    return () => {
      console.log("Disconnecting from room", roomId);
      connection.disconnect();
    };
  }, [roomId]); // On roomId change: first disconnect the old connection, then establish the new one

  return (
    <ul>
      {messages.map((m, i) => (
        <li key={i}>{m}</li>
      ))}
    </ul>
  );
}