React hooks reference

import { useState } from "react";

// Wrong: a Hook after an early return — the call order changes between renders
export function Price({ amount }: { amount: number | null }) {
  if (amount === null) return null;
  const [currency, setCurrency] = useState("KZT");

  return (
    <button onClick={() => setCurrency(currency === "KZT" ? "USD" : "KZT")}>
      {amount} {currency}
    </button>
  );
}

import { useState } from "react";

// Right: Hooks go before any early return, so the call order never changes
export function Price({ amount }: { amount: number | null }) {
  const [currency, setCurrency] = useState("KZT");
  if (amount === null) return null;

  return (
    <button onClick={() => setCurrency(currency === "KZT" ? "USD" : "KZT")}>
      {amount} {currency}
    </button>
  );
}

import { useState } from "react";

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

  function addThree() {
    // the updater gets the value after the previous queued calls
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setCount((c) => c + 1);
  }

  return <button onClick={addThree}>Count: {count}</button>;
}

export type Todo = { id: string; text: string; done: boolean };

export type TodoAction =
  | { type: "added"; id: string; text: string }
  | { type: "toggled"; id: string }
  | { type: "deleted"; id: string };

// a pure function: (current state, action) → next state
export function todosReducer(todos: Todo[], action: TodoAction): Todo[] {
  switch (action.type) {
    case "added":
      return [...todos, { id: action.id, text: action.text, done: false }];
    case "toggled":
      return todos.map((t) => (t.id === action.id ? { ...t, done: !t.done } : t));
    case "deleted":
      return todos.filter((t) => t.id !== action.id);
  }
}

import { useEffect, useState } from "react";

export function Clock() {
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id); // cleanup: before a re-run and on unmount
  }, []); // no reactive values inside — subscribe once

  return <time>{now.toLocaleTimeString("en-GB")}</time>;
}

import { useLayoutEffect, useRef, useState, type ReactNode } from "react";

type Props = { targetTop: number; children: ReactNode };

export function Tooltip({ targetTop, children }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    // measure before the browser paints the frame — no flicker
    setHeight(ref.current!.getBoundingClientRect().height);
  }, []);

  // no room above — show it below the target
  const top = height > targetTop ? targetTop + 24 : targetTop - height;

  return (
    <div ref={ref} role="tooltip" style={{ position: "absolute", top }}>
      {children}
    </div>
  );
}

import { useRef } from "react";

export function SearchBox() {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <>
      <input ref={inputRef} aria-label="Search" />
      <button onClick={() => inputRef.current?.focus()}>Find</button>
    </>
  );
}

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

type Theme = "light" | "dark";
const ThemeContext = createContext<Theme>("light"); // the value when there is no provider above

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

function Hint({ show }: { show: boolean }) {
  if (!show) return null;
  const theme = use(ThemeContext); // use() may be called after a condition
  return <p>Hint for the theme {theme}</p>;
}

export function App() {
  const [theme, setTheme] = useState<Theme>("dark");

  return (
    // React 19: the context itself works as the provider
    <ThemeContext value={theme}>
      <ThemedButton />
      <Hint show />
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Switch</button>
    </ThemeContext>
  );
}

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

type Product = { id: number; name: string };
type RowProps = { product: Product; onSelect: (id: number) => void };

const Row = memo(function Row({ product, onSelect }: RowProps) {
  return (
    <li>
      <button onClick={() => onSelect(product.id)}>{product.name}</button>
    </li>
  );
});

export function ProductList({ products }: { products: Product[] }) {
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState<number | null>(null);

  // recalculated only when products or query change
  const visible = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())),
    [products, query],
  );

  // the same function between renders — memo(Row) skips the rows
  const handleSelect = useCallback((id: number) => setSelected(id), []);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Filter" />
      <p>Selected: {selected ?? "—"}</p>
      <ul>
        {visible.map((p) => (
          <Row key={p.id} product={p} onSelect={handleSelect} />
        ))}
      </ul>
    </>
  );
}

import { useState, useTransition } from "react";
import { saveQuantity } from "./api";

export function Quantity() {
  const [qty, setQty] = useState(1);
  const [isPending, startTransition] = useTransition();

  function add() {
    startTransition(async () => {
      const saved = await saveQuantity(qty + 1);
      // wrap the update after await in startTransition again
      startTransition(() => setQty(saved));
    });
  }

  return (
    <>
      <button onClick={add} disabled={isPending}>+1</button>
      <output>{isPending ? "Saving…" : qty}</output>
    </>
  );
}

import { memo, useDeferredValue, useState } from "react";

const Results = memo(function Results({ items, query }: { items: string[]; query: string }) {
  const found = items.filter((item) => item.includes(query));
  return <ul>{found.map((item) => <li key={item}>{item}</li>)}</ul>;
});

export function Search({ items }: { items: string[] }) {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query); // the list catches up with typing in the background
  const isStale = query !== deferredQuery;

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Search" />
      <div style={{ opacity: isStale ? 0.5 : 1 }}>
        <Results items={items} query={deferredQuery} />
      </div>
    </>
  );
}

import { useActionState } from "react";
import { subscribe } from "./api";

type State = { ok: boolean; message: string } | null;

async function subscribeAction(_prev: State, formData: FormData): Promise<State> {
  const email = String(formData.get("email") ?? "");
  if (!email.includes("@")) return { ok: false, message: "Enter an email" };
  try {
    await subscribe(email);
    return { ok: true, message: "You are subscribed" };
  } catch {
    return { ok: false, message: "Something went wrong, try again later" };
  }
}

export function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(subscribeAction, null);

  return (
    <form action={formAction}>
      <input name="email" aria-label="Email" />
      <button disabled={isPending}>{isPending ? "Sending…" : "Subscribe"}</button>
      {state && <p role="status">{state.message}</p>}
    </form>
  );
}

import { startTransition, useOptimistic, useState } from "react";
import { sendMessage, type Message } from "./api";

type Shown = Message & { sending?: boolean };

export function Chat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [shown, addShown] = useOptimistic<Shown[], string>(messages, (state, text) => [
    ...state,
    { id: "pending", text, sending: true },
  ]);

  function send(text: string) {
    startTransition(async () => {
      addShown(text); // the message shows at once while the request runs
      const saved = await sendMessage(text);
      startTransition(() => setMessages((m) => [...m, saved]));
    });
  }

  return (
    <>
      <button onClick={() => send("Hello!")}>Send</button>
      <ul>
        {shown.map((m) => (
          <li key={m.id}>
            {m.text} {m.sending && "(sending…)"}
          </li>
        ))}
      </ul>
    </>
  );
}

import { useId } from "react";

export function PasswordField() {
  const id = useId(); // unique per instance, the same on the server and the client

  return (
    <>
      <label htmlFor={`${id}-input`}>Password</label>
      <input id={`${id}-input`} type="password" aria-describedby={`${id}-hint`} />
      <p id={`${id}-hint`}>At least 12 characters</p>
    </>
  );
}

import { useSyncExternalStore } from "react";

// declared outside the component — React does not resubscribe on every render
function subscribe(callback: () => void) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

export function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine, // client snapshot
    () => true, // snapshot for server rendering
  );
}

import { Suspense, use } from "react";
import type { User } from "./api";

function UserName({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // the fallback shows until the promise settles
  return <p>{user.name}</p>;
}

// create the promise outside render: in a loader, a handler or a Server Component
export function Profile({ userPromise }: { userPromise: Promise<User> }) {
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <UserName userPromise={userPromise} />
    </Suspense>
  );
}