Справочник хуков React

import { useState } from "react";

// Неправильно: хук после раннего return — порядок вызовов меняется между рендерами
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";

// Правильно: хуки — до любого раннего return, порядок вызовов всегда одинаковый
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() {
    // updater получает значение с учётом предыдущих вызовов в очереди
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setCount((c) => c + 1);
  }

  return <button onClick={addThree}>Счёт: {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 };

// чистая функция: (текущее состояние, действие) → новое состояние
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); // очистка: перед повтором и при размонтировании
  }, []); // реактивных значений внутри нет — подписка один раз

  return <time>{now.toLocaleTimeString("ru-RU")}</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(() => {
    // измеряем до того, как браузер нарисует кадр, — без мигания
    setHeight(ref.current!.getBoundingClientRect().height);
  }, []);

  // сверху не помещается — показываем под целью
  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="Поиск" />
      <button onClick={() => inputRef.current?.focus()}>Искать</button>
    </>
  );
}

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

type Theme = "light" | "dark";
const ThemeContext = createContext<Theme>("light"); // значение, если провайдера выше нет

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

function Hint({ show }: { show: boolean }) {
  if (!show) return null;
  const theme = use(ThemeContext); // use() можно вызвать после условия
  return <p>Подсказка для темы {theme}</p>;
}

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

  return (
    // React 19: сам контекст работает как провайдер
    <ThemeContext value={theme}>
      <ThemedButton />
      <Hint show />
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Сменить</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);

  // пересчёт только при смене products или query
  const visible = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())),
    [products, query],
  );

  // та же функция между рендерами — memo(Row) не перерисовывает строки
  const handleSelect = useCallback((id: number) => setSelected(id), []);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Фильтр" />
      <p>Выбран: {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);
      // обновление после await снова оборачиваем в startTransition
      startTransition(() => setQty(saved));
    });
  }

  return (
    <>
      <button onClick={add} disabled={isPending}>+1</button>
      <output>{isPending ? "Сохраняем…" : 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); // список догоняет ввод в фоне
  const isStale = query !== deferredQuery;

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Поиск" />
      <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: "Введите email" };
  try {
    await subscribe(email);
    return { ok: true, message: "Вы подписаны" };
  } catch {
    return { ok: false, message: "Не получилось, попробуйте позже" };
  }
}

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

  return (
    <form action={formAction}>
      <input name="email" aria-label="Email" />
      <button disabled={isPending}>{isPending ? "Отправляем…" : "Подписаться"}</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); // сообщение видно сразу, пока идёт запрос
      const saved = await sendMessage(text);
      startTransition(() => setMessages((m) => [...m, saved]));
    });
  }

  return (
    <>
      <button onClick={() => send("Здравствуйте!")}>Отправить</button>
      <ul>
        {shown.map((m) => (
          <li key={m.id}>
            {m.text} {m.sending && "(отправка…)"}
          </li>
        ))}
      </ul>
    </>
  );
}

import { useId } from "react";

export function PasswordField() {
  const id = useId(); // свой у каждого экземпляра, совпадает на сервере и клиенте

  return (
    <>
      <label htmlFor={`${id}-input`}>Пароль</label>
      <input id={`${id}-input`} type="password" aria-describedby={`${id}-hint`} />
      <p id={`${id}-hint`}>Не меньше 12 символов</p>
    </>
  );
}

import { useSyncExternalStore } from "react";

// объявлена вне компонента — React не переподписывается на каждом рендере
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, // снимок на клиенте
    () => true, // снимок при серверном рендеринге
  );
}

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

function UserName({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // пока промис не выполнен, виден fallback
  return <p>{user.name}</p>;
}

// промис создают вне рендера: в загрузчике, обработчике или Server Component
export function Profile({ userPromise }: { userPromise: Promise<User> }) {
  return (
    <Suspense fallback={<p>Загрузка…</p>}>
      <UserName userPromise={userPromise} />
    </Suspense>
  );
}