React: полный обзор, плюсы, минусы и пределы

import { useState } from 'react';

type Product = { id: number; name: string; price: number; inStock: boolean };

// компонент — это функция: на входе свойства, на выходе разметка
export function ProductCard({ product }: { product: Product }) {
  const [qty, setQty] = useState(1);

  return (
    <article className="card">
      <h3>{product.name}</h3>
      <p>Цена: {product.price * qty}</p>
      {product.inStock ? (
        <button onClick={() => setQty(qty + 1)}>Добавить ещё ({qty})</button>
      ) : (
        <p>Нет в наличии</p>
      )}
    </article>
  );
}

import { useActionState } from 'react';

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

// Actions в React 19: форма отправляет себя сама, а состояние запроса возвращается обратно
async function subscribe(_prev: State, form: FormData): Promise<State> {
  const email = String(form.get('email') ?? '');
  if (!email.includes('@')) return { ok: false, message: 'Проверьте почту' };
  // здесь — запрос к вашему серверу
  return { ok: true, message: 'Готово, спасибо!' };
}

export function SubscribeForm() {
  const [state, action, pending] = useActionState(subscribe, { ok: false, message: '' });

  return (
    <form action={action}>
      <input name="email" type="email" placeholder="[email protected]" required />
      <button disabled={pending}>{pending ? 'Отправляем…' : 'Подписаться'}</button>
      {state.message && <p role="status">{state.message}</p>}
    </form>
  );
}

import { useEffect, useState } from 'react';

// свой хук: переиспользуемая логика со своим состоянием и типом значения
export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const saved = typeof window === 'undefined' ? null : localStorage.getItem(key);
    return saved === null ? initial : (JSON.parse(saved) as T);
  });

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

  return [value, setValue] as const;
}

// им может пользоваться любой компонент: тема переживает перезагрузку страницы
export function ThemeSwitch() {
  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Тема: {theme}
    </button>
  );
}