Четыре хука, которые
убирают рутину

Кнопка-сердечко со счётчиком лайков. По клику число растёт сразу, но запрос иногда падает — и тогда лайк откатывается назад.

1. Заведи настоящее состояние — число лайков через useState, например 10.
2. Оберни его в useOptimistic. Функция обновления берёт текущее число и прибавляет 1.
3. По клику вызови addOptimistic() внутри startTransition, а следом «отправь запрос».
4. Запрос — фейковый: setTimeout, который в 30% случаев завершается ошибкой. При успехе увеличь настоящее состояние на 1. При ошибке не делай ничего — React вернёт число сам.

Подсказкаawait new Promise((res, rej) => setTimeout(() => Math.random() < 0.3 ? rej() : res(), 800))

ГотовоКогда запрос падает, счётчик подпрыгивает на +1 и тут же возвращается на место.

Поле email и кнопка. Пока идёт отправка — кнопка заблокирована и пишет «Отправляем…». Потом либо «Готово», либо ошибка, если email пустой или без символа @.

1. Напиши async-функцию действия subscribeAction(prevState, formData). Достань email через formData.get('email').
2. Проверь его: если пусто или нет @ — верни { error: 'Введите email' }. Иначе подожди секунду и верни { ok: true }.
3. В компоненте: const [state, action, isPending] = useActionState(subscribeAction, null).
4. Повесь action на <form action={action}>, блокируй кнопку по isPending, покажи state.error или state.ok.

ПодсказкаИмпорт useActionState из 'react', а не из 'react-dom'. Проверку делай прямо внутри функции действия — отдельный useState для ошибки больше не нужен.

ГотовоПустой email даёт ошибку сразу. Правильный — «Отправляем…», затем «Готово».

Вынести кнопку отправки в отдельный компонент, который сам знает, идёт ли отправка формы — без единого пропса. Вставить его в две разные формы.

1. Сделай компонент SubmitButton. Внутри — const { pending } = useFormStatus(). Кнопка блокируется и меняет текст по pending.
2. Собери две разные формы: у каждой свой action и свои поля.
3. В каждую форму вставь <SubmitButton /> — ничего ей не передавая.
4. Отправь по очереди обе формы и посмотри на кнопки.

ПодсказкаuseFormStatus — из 'react-dom'. Кнопка обязана быть внутри <form>: если поставить рядом, pending всегда останется false.

ГотовоОбе кнопки гаснут во время своей отправки, хотя ты не прокидывал им состояние.

Компонент читает данные пользователя через use(userPromise) и показывает имя и роль. Пока грузится — Suspense показывает заглушку.

1. Создай промис один раз снаружи компонента — в модуле или в родителе: const userPromise = fetchUser().
2. В компоненте Profile: const user = use(userPromise), выведи user.name и user.role.
3. Оберни <Profile /> в <Suspense fallback={<p>Загрузка…</p>}>.
4. fetchUser — снова фейк: промис с setTimeout, который через секунду отдаёт объект пользователя.

ПодсказкаЕсли создать промис прямо в теле компонента, на каждый рендер будет новый промис и бесконечная загрузка. Промис живёт снаружи.

ГотовоСначала видно «Загрузка…», потом — профиль. Спиннер не крутится вечно.