useOptimistic: показать результат заранее

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Форма с действием из прошлой статьи ведёт себя честно: пока действие не вернулось, состояние не менялось — значит и на экране ничего нового. Прогноз перед запуском: сколько строк «рендер» напечатается и сколько пунктов будет в списке через 200 мс после клика?

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>(["купить хлеб"]);
  console.log("рендер | в списке:", items.length);

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    await wait(500); // здесь был бы запрос к серверу
    setItems((prev) => [...prev, text]);
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {items.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const itemCount = () => document.querySelectorAll("li").length;
// заполняем поле и жмём кнопку за читателя
setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс после клика пунктов:", itemCount()), 300);
setTimeout(() => console.log("через 700 мс после клика пунктов:", itemCount()), 800);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>(["купить хлеб"]);
  console.log("рендер | в списке:", items.length);

const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    await wait(500); // здесь был бы запрос к серверу
    setItems((prev) => [...prev, text]);
  };

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {items.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const itemCount = () => document.querySelectorAll("li").length;
// заполняем поле и жмём кнопку за читателя
setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс после клика пунктов:", itemCount()), 300);
setTimeout(() => console.log("через 700 мс после клика пунктов:", itemCount()), 800);

страница примера

Сначала предположите, что выведет код

Полсекунды пустоты — это много. В списке дел ещё терпимо, в чате уже нет: человек нажал «отправить», сообщение не появилось, и он нажимает ещё раз. Приём, которым это лечат, называется оптимистичным интерфейсом: мы показываем результат, которого пока нет, потому что в девяти случаях из десяти он именно такой.

Первое, что приходит в голову, — положить запись в состояние сразу, а когда придёт ответ, подменить её настоящей. Кода становится втрое больше: у нарисованной записи нет настоящего id (его выдаст сервер), поэтому нужен временный, нужен признак «ещё не сохранена», нужна подмена после ответа. Прогноз: через сколько миллисекунд после клика запись окажется в списке?

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface Item {
  id: string;
  text: string;
  saved: boolean;
}

let seq = 0;

function Todos() {
  const [items, setItems] = React.useState<Item[]>([]);

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    // временный ключ: настоящий id выдаст сервер, а нарисовать надо уже сейчас
    const draftId = "черновик-" + ++seq;
    setItems((prev) => [...prev, { id: draftId, text, saved: false }]);
    await wait(400);
    // черновик подменяется тем, что вернул сервер
    setItems((prev) =>
      prev.map((item) => (item.id === draftId ? { id: "s" + seq, text, saved: true } : item)),
    );
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}{item.saved ? "" : " …"}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const listText = () => JSON.stringify((document.querySelector("ul") as HTMLElement).innerText);
setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
[150, 300, 600].forEach((ms) => setTimeout(() => console.log("на", ms, "мс в списке:", listText()), ms));

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface Item {
  id: string;
  text: string;
  saved: boolean;
}

let seq = 0;

function Todos() {
  const [items, setItems] = React.useState<Item[]>([]);

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}{item.saved ? "" : " …"}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const listText = () => JSON.stringify((document.querySelector("ul") as HTMLElement).innerText);
setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
[150, 300, 600].forEach((ms) => setTimeout(() => console.log("на", ms, "мс в списке:", listText()), ms));

страница примера

Сначала предположите, что выведет код

Черновик не появился вообще. На 150 мс список пуст, на 300 мс пуст, и только на 600 мс в нём оказывается сохранённая запись — ровно как в первом примере, где никакого оптимизма не было.

Причина не в ошибке кода. Действие формы React выполняет внутри перехода — того самого, из статьи про useTransition, — а переход существует именно затем, чтобы не показывать полуготовых состояний. Все обновления, случившиеся внутри действия, React придерживает и выкатывает одним куском, когда действие закончилось. Оба setItems доехали до экрана вместе, и первый из них потерял всякий смысл.

Вне действия — в обычном onClick — setState коммитится сразу, и нарисовать заранее руками можно. Но тогда ваши и временный id, и подмена, и уборка в каждой ветке отказа.

Значит, нужен способ сказать React другое: «это обновление — не часть перехода, а картинка на время перехода». Ровно для этого и сделан useOptimistic.

Хук устроен как редьюсер, но с важным отличием: он ничего не хранит. Ему передают настоящее состояние и правило, как поверх него дорисовать ожидаемое. Пока идёт действие, компонент видит результат этого правила; действие кончилось — правило перестаёт применяться, и на экране снова ровно то, что лежит в настоящем состоянии.

Что передаём	Что это
`passthrough`	настоящее состояние — то, что видно, когда никаких действий не идёт
`reducer`	`(текущее, действие) → новое`: как дорисовать ожидаемое

Что вернулось	Что это
`optimistic`	состояние с наложением — его и рисуют в разметке
`addOptimistic`	добавить наложение; принимает то, что редьюсер ждёт вторым аргументом

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

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface Item {
  id: string;
  text: string;
  pending?: boolean; // только у нарисованных: настоящим записям это поле не нужно
}

function Todos() {
  const [items, setItems] = React.useState<Item[]>([{ id: "1", text: "купить хлеб" }]);
  // первый аргумент — настоящее состояние, второй — правило, как дорисовать ожидаемое
  const [shown, addOptimistic] = React.useOptimistic(items, (current: Item[], text: string) => [
    ...current,
    { id: "черновик-" + current.length, text, pending: true },
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", shown.length);

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(500);
    // переход вокруг обновления после await — зачем, разберём в четвёртом разделе
    React.startTransition(() => setItems((prev) => [...prev, { id: String(prev.length + 1), text }]));
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((item) => (
          <li key={item.id}>{item.text}{item.pending ? " …" : ""}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс после клика пунктов:", document.querySelectorAll("li").length), 300);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface Item {
  id: string;
  text: string;
  pending?: boolean; // только у нарисованных: настоящим записям это поле не нужно
}

function Todos() {
  const [items, setItems] = React.useState<Item[]>([{ id: "1", text: "купить хлеб" }]);
  // первый аргумент — настоящее состояние, второй — правило, как дорисовать ожидаемое
  const [shown, addOptimistic] = React.useOptimistic(items, (current: Item[], text: string) => [
    ...current,
    { id: "черновик-" + current.length, text, pending: true },
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", shown.length);

const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(500);
    // переход вокруг обновления после await — зачем, разберём в четвёртом разделе
    React.startTransition(() => setItems((prev) => [...prev, { id: String(prev.length + 1), text }]));
  };

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((item) => (
          <li key={item.id}>{item.text}{item.pending ? " …" : ""}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс после клика пунктов:", document.querySelectorAll("li").length), 300);

страница примера

Сначала предположите, что выведет код

В середине вывода стоит строка, ради которой всё и затевалось: настоящих: 1 | на экране: 2. Два значения разошлись в одном и том же рендере — и это не рассинхронизация, а вся суть хука. items остаётся правдой, shown — это правда плюс то, чего мы ждём.

Обратите внимание, чего в коде нет. Нет вызова, снимающего наложение. Нет подмены черновика настоящей записью. Нет счётчика seq, а поле pending ставит редьюсер — в настоящих данных его нет и серверу оно не уедет. Осталось ровно два действия: дорисовать и сохранить.

Наложение живёт не в компоненте, а в переходе. Поэтому его нельзя «забыть снять»: React снимает его сам, когда действие завершилось — успехом, отказом или исключением.

Редьюсер задаёт и тип того, что принимает addOptimistic. Ошибиться легко: рука сама пишет туда готовый элемент списка вместо текста. Запустите и прочитайте, чего компилятор ждал.

tsx

interface Item {
  id: string;
  text: string;
}

// компонент нарочно не монтируется: здесь интересны типы, а не разметка
function Todos() {
  const [items] = React.useState<Item[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: Item[], text: string) => [
    ...current,
    { id: "черновик", text },
  ]);

  const add = () => {
    addOptimistic({ id: "черновик", text: "полить цветы" });
  };

  return <button onClick={add}>записей: {shown.length}</button>;
}

страница примера

Сначала предположите, что выведет код

У хука есть и однорукий вид: useOptimistic(value) без второго аргумента. Тогда возвращённая функция принимает не «действие», а сразу новое значение целиком — удобно, когда оптимистично меняется одна величина, а не список.

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Rename() {
  const [name, setName] = React.useState("Черновик");
  // без редьюсера: в setShown передают сразу новое значение
  const [shown, setShown] = React.useOptimistic(name);
  console.log("рендер | настоящее:", name, "| на экране:", shown);

  const rename = async (formData: FormData) => {
    const next = String(formData.get("name") ?? "");
    setShown(next);
    await wait(400);
    React.startTransition(() => setName(next));
  };

  return (
    <form action={rename}>
      <h3>{shown}</h3>
      <input name="name" defaultValue="" />
      <button id="send">переименовать</button>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Rename />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "Список покупок";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс в заголовке:", document.querySelector("h3")!.textContent), 300);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Rename() {
  const [name, setName] = React.useState("Черновик");
  // без редьюсера: в setShown передают сразу новое значение
  const [shown, setShown] = React.useOptimistic(name);
  console.log("рендер | настоящее:", name, "| на экране:", shown);

const rename = async (formData: FormData) => {
    const next = String(formData.get("name") ?? "");
    setShown(next);
    await wait(400);
    React.startTransition(() => setName(next));
  };

return (
    <form action={rename}>
      <h3>{shown}</h3>
      <input name="name" defaultValue="" />
      <button id="send">переименовать</button>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Rename />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "Список покупок";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс в заголовке:", document.querySelector("h3")!.textContent), 300);

страница примера

Сначала предположите, что выведет код

Самое неожиданное в useOptimistic — то, что при отказе не нужно делать ничего. Наложение действует, пока идёт действие, и перестаёт действовать, когда оно кончилось. Отказ — это тоже «кончилось». Настоящее состояние при отказе не менялось, значит компонент нарисует его как было, и нарисованное исчезнет само.

Прогноз: запись короткая, сервер её не примет. Появится ли она на экране вообще и что останется после ответа?

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>([]);
  const [error, setError] = React.useState("");
  const [shown, addOptimistic] = React.useOptimistic(items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", shown.length, "| ошибка:", JSON.stringify(error));

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(400);
    if (text.length < 5) {
      React.startTransition(() => setError("слишком короткая запись: " + text));
      return;
    }
    React.startTransition(() => setItems((prev) => [...prev, text]));
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <p id="err">{error}</p>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const itemCount = () => document.querySelectorAll("li").length;
setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "два";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("пока действие идёт, пунктов:", itemCount()), 300);
setTimeout(() => console.log("после отказа пунктов:", itemCount(), "| ошибка:", document.getElementById("err")!.textContent), 700);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>([]);
  const [error, setError] = React.useState("");
  const [shown, addOptimistic] = React.useOptimistic(items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", shown.length, "| ошибка:", JSON.stringify(error));

const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(400);
    if (text.length < 5) {
      React.startTransition(() => setError("слишком короткая запись: " + text));
      return;
    }
    React.startTransition(() => setItems((prev) => [...prev, text]));
  };

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <p id="err">{error}</p>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const itemCount = () => document.querySelectorAll("li").length;
setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "два";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("пока действие идёт, пунктов:", itemCount()), 300);
setTimeout(() => console.log("после отказа пунктов:", itemCount(), "| ошибка:", document.getElementById("err")!.textContent), 700);

страница примера

Сначала предположите, что выведет код

Запись появилась, повисела 400 мс и пропала, а под формой встала причина. Всё, что для этого написано, — addOptimistic(text) и setError(...). В ручном варианте из первого раздела ту же пропажу пришлось бы устраивать самим: завести ветку отказа и вынуть из списка filter-ом именно свой черновик, а не последний элемент.

Отсюда следствие про ошибки. В прошлой статье мы договорились: провалившаяся проверка — не поломка, её возвращают, а не бросают. Наложению всё равно: и возвращённый отказ, и брошенное исключение одинаково завершают действие, а значит одинаково его снимают. Разница в другом — после исключения компонент заменит собой граница ошибок, и показывать причину будет уже негде.

Второе следствие — про очередь. Наложение не одно: каждый вызов addOptimistic добавляет своё, и React прогоняет редьюсер по всем незавершённым действиям поверх настоящего состояния. Прогноз: два клика подряд, второй через 150 мс после первого. Сколько пунктов будет на экране через 300 мс и в каком порядке пойдут рендеры?

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", JSON.stringify(shown));

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(500);
    React.startTransition(() => setItems((prev) => [...prev, text]));
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const send = (value: string) => {
  (document.querySelector("input") as HTMLInputElement).value = value;
  document.getElementById("send")!.click();
};
setTimeout(() => send("полить цветы"), 100);
setTimeout(() => send("вынести ёлку"), 250);
setTimeout(() => console.log("на 300 мс пунктов:", document.querySelectorAll("li").length), 300);
setTimeout(() => console.log("на 1400 мс пунктов:", document.querySelectorAll("li").length), 1400);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", JSON.stringify(shown));

const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(500);
    React.startTransition(() => setItems((prev) => [...prev, text]));
  };

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const send = (value: string) => {
  (document.querySelector("input") as HTMLInputElement).value = value;
  document.getElementById("send")!.click();
};
setTimeout(() => send("полить цветы"), 100);
setTimeout(() => send("вынести ёлку"), 250);
setTimeout(() => console.log("на 300 мс пунктов:", document.querySelectorAll("li").length), 300);
setTimeout(() => console.log("на 1400 мс пунктов:", document.querySelectorAll("li").length), 1400);

страница примера

Сначала предположите, что выведет код

Оба наложения применились сразу — обе записи на экране, хотя настоящий список ещё пуст. А вот отпустились они не по очереди, а вместе: рендера с одной сохранённой записью и одним черновиком в выводе нет. Пока в очереди есть хоть одно незавершённое действие, наложения держатся все — и настоящее состояние приезжает сразу на две записи.

Ключи у нарисованных записей должны быть разными: два наложения — два элемента списка. Редьюсер получает уже накопленное состояние, поэтому длину для ключа удобно брать из него, а не из настоящего массива.

Во всех примерах выше addOptimistic вызывался внутри действия формы. Это не стилистика: наложение привязано к переходу и живёт ровно столько, сколько тот не завершился. Нет перехода — нечему длиться.

Прогноз: обычный обработчик onClick, внутри — addOptimistic и ожидание ответа. Что покажет кнопка через 200 мс после клика?

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Likes() {
  const [count, setCount] = React.useState(0);
  const [shown, addOptimistic] = React.useOptimistic(count, (current: number, delta: number) => current + delta);
  console.log("рендер | настоящих:", count, "| на экране:", shown);

  const like = async () => {
    // никакого перехода вокруг — обычный асинхронный обработчик
    addOptimistic(1);
    await wait(400);
    setCount((prev) => prev + 1);
  };

  return (
    <button id="like" onClick={like}>
      лайков: {shown}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Likes />);

const label = () => document.getElementById("like")!.textContent;
setTimeout(() => document.getElementById("like")!.click(), 100);
setTimeout(() => console.log("через 200 мс:", label()), 300);
setTimeout(() => console.log("через 500 мс:", label()), 600);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Likes() {
  const [count, setCount] = React.useState(0);
  const [shown, addOptimistic] = React.useOptimistic(count, (current: number, delta: number) => current + delta);
  console.log("рендер | настоящих:", count, "| на экране:", shown);

const like = async () => {
    // никакого перехода вокруг — обычный асинхронный обработчик
    addOptimistic(1);
    await wait(400);
    setCount((prev) => prev + 1);
  };

return (
    <button id="like" onClick={like}>
      лайков: {shown}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Likes />);

const label = () => document.getElementById("like")!.textContent;
setTimeout(() => document.getElementById("like")!.click(), 100);
setTimeout(() => console.log("через 200 мс:", label()), 300);
setTimeout(() => console.log("через 500 мс:", label()), 600);

страница примера

Сначала предположите, что выведет код

Первые три рендера идут подряд: 0, 1 и снова 0. Наложение применилось на один-единственный рендер и тут же было снято — держать его оказалось нечем. На экране за эти 400 мс не изменилось ничего.

Строка про переход в выводе — предупреждение самого React: «An optimistic state update occurred outside a transition or action». Его видно потому, что React для песочницы собран как для разработки: в боевой сборке остались бы только рендеры, то есть одно поведение без объяснения.

Лечится это переходом: startTransition с асинхронной функцией внутри и есть «действие», к которому наложение привяжется. Обновление настоящего состояния после await заворачивают в переход отдельно — граница ожидания разрывает связь с внешним переходом.

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Likes() {
  const [count, setCount] = React.useState(0);
  const [shown, addOptimistic] = React.useOptimistic(count, (current: number, delta: number) => current + delta);
  console.log("рендер | настоящих:", count, "| на экране:", shown);

  const like = () => {
    // асинхронная функция внутри startTransition и есть «действие»
    React.startTransition(async () => {
      addOptimistic(1);
      await wait(400);
      // после await свой переход: прежний закончился на границе ожидания
      React.startTransition(() => setCount((prev) => prev + 1));
    });
  };

  return (
    <button id="like" onClick={like}>
      лайков: {shown}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Likes />);

const label = () => document.getElementById("like")!.textContent;
setTimeout(() => document.getElementById("like")!.click(), 100);
setTimeout(() => console.log("через 200 мс:", label()), 300);
setTimeout(() => console.log("через 500 мс:", label()), 600);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Likes() {
  const [count, setCount] = React.useState(0);
  const [shown, addOptimistic] = React.useOptimistic(count, (current: number, delta: number) => current + delta);
  console.log("рендер | настоящих:", count, "| на экране:", shown);

const like = () => {
    // асинхронная функция внутри startTransition и есть «действие»
    React.startTransition(async () => {
      addOptimistic(1);
      await wait(400);
      // после await свой переход: прежний закончился на границе ожидания
      React.startTransition(() => setCount((prev) => prev + 1));
    });
  };

return (
    <button id="like" onClick={like}>
      лайков: {shown}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Likes />);

const label = () => document.getElementById("like")!.textContent;
setTimeout(() => document.getElementById("like")!.click(), 100);
setTimeout(() => console.log("через 200 мс:", label()), 300);
setTimeout(() => console.log("через 500 мс:", label()), 600);

страница примера

Сначала предположите, что выведет код

Итого — три места, откуда берётся действие, и все три годятся:

Откуда действие	Как это выглядит
Форма	`<form action={fn}>` — React заворачивает `fn` в переход сам
`useActionState`	обёртка `formAction` из прошлой статьи — тот же переход
`startTransition`	ручной переход вокруг асинхронной функции — для кнопок вне форм

Без этой обёртки код тоже работает, но появляется лишний кадр. Настоящее состояние приезжает срочным обновлением — сразу, — а наложение снимается вместе с концом перехода, чуть позже. Между ними есть рендер, где применено и то и другое: запись сохранена и нарисована. Уберите React.startTransition из строки с setItems и посмотрите на список через 700 мс.

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", JSON.stringify(shown));

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(500);
    setItems((prev) => [...prev, text]);
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const send = (value: string) => {
  (document.querySelector("input") as HTMLInputElement).value = value;
  document.getElementById("send")!.click();
};
setTimeout(() => send("полить цветы"), 100);
setTimeout(() => send("вынести ёлку"), 250);
setTimeout(() => console.log("на 700 мс пунктов:", document.querySelectorAll("li").length), 700);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Todos() {
  const [items, setItems] = React.useState<string[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", items.length, "| на экране:", JSON.stringify(shown));

const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(500);
    setItems((prev) => [...prev, text]);
  };

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

const send = (value: string) => {
  (document.querySelector("input") as HTMLInputElement).value = value;
  document.getElementById("send")!.click();
};
setTimeout(() => send("полить цветы"), 100);
setTimeout(() => send("вынести ёлку"), 250);
setTimeout(() => console.log("на 700 мс пунктов:", document.querySelectorAll("li").length), 700);

страница примера

Сначала предположите, что выведет код

На 700 мс пунктов три, хотя добавляли всего две записи: «полить цветы» уже сохранилась, а её наложение ещё держится — вторая отправка не закончилась и не даёт снять очередь. В самом конце в выводе мелькает и рендер с четырьмя пунктами. С startTransition из основного примера таких кадров нет: настоящее значение приезжает тем же переходом, который снимает наложение.

В форме, где уже есть useActionState, настоящим состоянием для наложения служит то, что вернуло действие. Ручной startTransition здесь не нужен вовсе: и обновление, и снятие наложения принадлежат одному действию.

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface State {
  items: string[];
  error: string;
}

async function save(prev: State, formData: FormData): Promise<State> {
  const text = String(formData.get("text") ?? "");
  await wait(400);
  if (text.length < 5) return { items: prev.items, error: "слишком короткая запись" };
  return { items: [...prev.items, text], error: "" };
}

function Todos() {
  const [state, formAction] = React.useActionState(save, { items: [], error: "" });
  // настоящее состояние приходит из действия, а не из useState
  const [shown, addOptimistic] = React.useOptimistic(state.items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", state.items.length, "| на экране:", JSON.stringify(shown));

  return (
    <form
      action={(formData: FormData) => {
        // наложение добавляем до того, как начнётся ожидание
        addOptimistic(String(formData.get("text") ?? ""));
        formAction(formData);
      }}
    >
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <p>{state.error}</p>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс пунктов:", document.querySelectorAll("li").length), 300);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface State {
  items: string[];
  error: string;
}

async function save(prev: State, formData: FormData): Promise<State> {
  const text = String(formData.get("text") ?? "");
  await wait(400);
  if (text.length < 5) return { items: prev.items, error: "слишком короткая запись" };
  return { items: [...prev.items, text], error: "" };
}

function Todos() {
  const [state, formAction] = React.useActionState(save, { items: [], error: "" });
  // настоящее состояние приходит из действия, а не из useState
  const [shown, addOptimistic] = React.useOptimistic(state.items, (current: string[], text: string) => [
    ...current,
    text + " …",
  ]);
  console.log("рендер | настоящих:", state.items.length, "| на экране:", JSON.stringify(shown));

return (
    <form
      action={(formData: FormData) => {
        // наложение добавляем до того, как начнётся ожидание
        addOptimistic(String(formData.get("text") ?? ""));
        formAction(formData);
      }}
    >
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <p>{state.error}</p>
      <ul>
        {shown.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Todos />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс пунктов:", document.querySelectorAll("li").length), 300);

страница примера

Сначала предположите, что выведет код

Оптимистичный интерфейс — это ставка: мы утверждаем то, чего ещё не знаем. Ставка выгодна, когда отказ дёшев и легко объясним, и вредна, когда человек примет нарисованное за факт и уйдёт со страницы.

Рисовать заранее	Не рисовать
Лайк, звёздочка, подписка — отказ ничего не портит	Оплата и списание денег: «прошло» говорит банк, а не браузер
Отправленное сообщение с пометкой «…»	Номер заказа, чек, срок доставки — их придумывает сервер
Галочка «сделано» в списке дел	Удаление, которое нельзя отменить
Переименование, сортировка, перенос между колонками	Всё, где отказ означает «вы неправильно поняли, что произошло»

Отдельная ловушка — идентичность. У нарисованной записи нет настоящего id, и ключ ей приходится выдумывать. Когда придёт ответ, ключ сменится, React посчитает элемент новым и пересоздаст узел: пропадёт фокус, оборвётся анимация, слетит выделение текста. В списке из статичных строк это незаметно, в редактируемой — очень даже.

Лечится тем, что ключ перестаёт быть выдуманным: его генерирует клиент и отправляет серверу вместе с данными. Тогда «черновик» и сохранённая запись — это один и тот же узел с одним и тем же ключом.

tsx

interface Item {
  id: string;
  text: string;
}

// пример не монтируется: важна форма данных, а не разметка
function makeDraft(text: string): Item {
  // id придумывает клиент и отправляет серверу — ключ не сменится после ответа
  return { id: crypto.randomUUID(), text };
}

const draft = makeDraft("полить цветы");
console.log(draft.id.length);

страница примера

Сначала предположите, что выведет код

Сервер при этом обязан считать такой id идемпотентным ключом: повторная отправка с тем же id не должна создавать вторую запись.

И последнее. Ничто в этой статье не принадлежит Next: useOptimistic — хук React 19, все примеры выше запустились в браузере без сервера и маршрутов. Меняется только то, откуда берётся «настоящее состояние». В Next после серверного действия страница перечитывает данные сама, и это перечитывание входит в то же действие — наложение отпускается ровно тогда, когда свежие данные уже приехали. Как устроено само перечитывание — тема следующей статьи.

Внутри действия обычный setState на экран заранее не попадёт: переход придерживает все обновления до конца действия.
useOptimistic ничего не хранит — он накладывает ожидаемое поверх настоящего состояния на время действия.
Наложение снимается само, когда действие завершилось, поэтому кода отката в оптимистичном интерфейсе нет.
Работает только внутри действия или перехода: из обычного onClick значение применится на один рендер и пропадёт.
Наложения накапливаются очередью и отпускаются все разом, когда закончится последнее незавершённое действие.
Рисовать заранее стоит дешёвое и обратимое: лайк, галочку, сообщение. Деньги, номера заказов и необратимое удаление — нет.

1/4Что передают первым аргументом в useOptimistic?

2/4Внутри действия формы вызвали обычный setState, а потом await на 400 мс. Когда обновление попадёт на экран?

3/4Действие вернуло отказ. Что нужно написать, чтобы нарисованная заранее запись исчезла с экрана?

4/4addOptimistic вызван в обычном обработчике onClick, без перехода вокруг. Что произойдёт?

Галочка, которая не ждёт

Переключатель «сделано» ждёт ответа сервера 400 мс и только потом закрашивается. Сделайте так, чтобы он менялся сразу, а при отказе (сервер не разрешает снимать галочку) возвращался назад сам.

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Task() {
  const [done, setDone] = React.useState(false);

  const toggle = async () => {
    const next = !done;
    await wait(400); // здесь был бы запрос
    if (!next) {
      console.log("сервер отказал: снимать галочку нельзя");
      return;
    }
    React.startTransition(() => setDone(next));
  };

  return (
    <form action={toggle}>
      <button id="go">{done ? "✓ сделано" : "○ не сделано"}</button>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Task />);

const label = () => document.getElementById("go")!.textContent;
setTimeout(() => document.getElementById("go")!.click(), 100);
setTimeout(() => console.log("через 200 мс:", label()), 300); // сейчас «не сделано», а нужно «сделано»
setTimeout(() => console.log("через 600 мс:", label()), 700);

страница примера

Сначала предположите, что выведет код

Настоящее состояние остаётся в useState, а на экран идёт наложение. Редьюсер здесь не нужен: меняется одна величина целиком.

jsлистинг · не запускается

function Task() {
  const [done, setDone] = React.useState(false);
  const [shown, setShown] = React.useOptimistic(done);

  const toggle = async () => {
    const next = !shown;
    setShown(next);
    await wait(400);
    if (!next) {
      // отката нет: настоящее состояние не менялось, наложение снимется само
      console.log("сервер отказал: снимать галочку нельзя");
      return;
    }
    React.startTransition(() => setDone(next));
  };

  return (
    <form action={toggle}>
      <button id="go">{shown ? "✓ сделано" : "○ не сделано"}</button>
    </form>
  );
}

function Task() {
  const [done, setDone] = React.useState(false);
  const [shown, setShown] = React.useOptimistic(done);

  const toggle = async () => {
    const next = !shown;
    setShown(next);
    await wait(400);
    if (!next) {
      // отката нет: настоящее состояние не менялось, наложение снимется само
      console.log("сервер отказал: снимать галочку нельзя");
      return;
    }
    React.startTransition(() => setDone(next));
  };

  return (
    <form action={toggle}>
      <button id="go">{shown ? "✓ сделано" : "○ не сделано"}</button>
    </form>
  );
}

Обратите внимание на !shown, а не !done: следующий клик должен отталкиваться от того, что человек видит, а не от того, что пока лежит в настоящем состоянии.

Убрать бухгалтерию

Здесь оптимизм написан руками — и, как мы видели в первом разделе, изнутри действия он всё равно не работает: черновик появляется только вместе с ответом. Перепишите компонент на useOptimistic. Из типа Item должно уйти поле saved, а из действия — счётчик, подмена и уборка.

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface Item {
  id: string;
  text: string;
  saved: boolean;
}

let seq = 0;

function Notes() {
  const [items, setItems] = React.useState<Item[]>([]);

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    const draftId = "черновик-" + ++seq;
    setItems((prev) => [...prev, { id: draftId, text, saved: false }]);
    await wait(400);
    if (text.length < 5) {
      setItems((prev) => prev.filter((item) => item.id !== draftId));
      return;
    }
    setItems((prev) =>
      prev.map((item) => (item.id === draftId ? { id: "s" + seq, text, saved: true } : item)),
    );
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}{item.saved ? "" : " …"}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Notes />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс пунктов:", document.querySelectorAll("li").length), 300);

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

interface Item {
  id: string;
  text: string;
  saved: boolean;
}

let seq = 0;

function Notes() {
  const [items, setItems] = React.useState<Item[]>([]);

return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}{item.saved ? "" : " …"}</li>
        ))}
      </ul>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Notes />);

setTimeout(() => {
  (document.querySelector("input") as HTMLInputElement).value = "полить цветы";
  document.getElementById("send")!.click();
}, 100);
setTimeout(() => console.log("через 200 мс пунктов:", document.querySelectorAll("li").length), 300);

страница примера

Сначала предположите, что выведет код

Настоящий список хранит только сохранённые записи, а признак «в пути» ставит редьюсер — в типе настоящих данных его больше нет.

tsлистинг · не запускается

interface Item {
  id: string;
  text: string;
  pending?: boolean;
}

function Notes() {
  const [items, setItems] = React.useState<Item[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: Item[], text: string) => [
    ...current,
    { id: "черновик-" + current.length, text, pending: true },
  ]);

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(400);
    if (text.length < 5) return;
    React.startTransition(() =>
      setItems((prev) => [...prev, { id: String(prev.length + 1), text }]),
    );
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((item) => (
          <li key={item.id}>{item.text}{item.pending ? " …" : ""}</li>
        ))}
      </ul>
    </form>
  );
}

interface Item {
  id: string;
  text: string;
  pending?: boolean;
}

function Notes() {
  const [items, setItems] = React.useState<Item[]>([]);
  const [shown, addOptimistic] = React.useOptimistic(items, (current: Item[], text: string) => [
    ...current,
    { id: "черновик-" + current.length, text, pending: true },
  ]);

  const add = async (formData: FormData) => {
    const text = String(formData.get("text") ?? "");
    addOptimistic(text);
    await wait(400);
    if (text.length < 5) return;
    React.startTransition(() =>
      setItems((prev) => [...prev, { id: String(prev.length + 1), text }]),
    );
  };

  return (
    <form action={add}>
      <input name="text" defaultValue="" />
      <button id="send">добавить</button>
      <ul>
        {shown.map((item) => (
          <li key={item.id}>{item.text}{item.pending ? " …" : ""}</li>
        ))}
      </ul>
    </form>
  );
}

Счётчик seq, filter и map с подменой исчезли целиком, а ветка отказа свелась к return.

Почему лайк не держится

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

tsx

// сети в песочнице нет: ответ сервера честно изображаем таймером
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

function Likes() {
  const [count, setCount] = React.useState(0);
  const [shown, addOptimistic] = React.useOptimistic(count, (current: number, delta: number) => current + delta);
  console.log("рендер | настоящих:", count, "| на экране:", shown);

  const like = async () => {
    addOptimistic(1);
    await wait(400);
    setCount((prev) => prev + 1);
  };

  return (
    <button id="like" onClick={like}>
      лайков: {shown}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Likes />);

setTimeout(() => document.getElementById("like")!.click(), 100);
setTimeout(() => console.log("через 200 мс:", document.getElementById("like")!.textContent), 300);

страница примера

Сначала предположите, что выведет код

Наложение живёт внутри перехода, а обычный onClick перехода не создаёт. Достаточно завернуть тело обработчика в startTransition, не забыв про отдельный переход для обновления после await.

jsлистинг · не запускается

const like = () => {
  React.startTransition(async () => {
    addOptimistic(1);
    await wait(400);
    React.startTransition(() => setCount((prev) => prev + 1));
  });
};

const like = () => {
  React.startTransition(async () => {
    addOptimistic(1);
    await wait(400);
    React.startTransition(() => setCount((prev) => prev + 1));
  });
};

Второй вариант — перевести кнопку на форму с action: действие формы React заворачивает в переход сам, и ручной startTransition снаружи становится не нужен.

useOptimistic: показать результат заранее

Видеоразбор темы за 5–7 минут

Пауза, которую видит читательИ почему нарисовать заранее обычным setState не выйдет

useOptimisticНе хранилище, а наложение поверх настоящего состояния

Откат — это отсутствие кодаЧто происходит с нарисованным, когда сервер отказал

Только внутри переходаПочему наложение из обычного onClick исчезает мгновенно

Что рисовать заранее, а что нетЦена ошибки и данные, которых у браузера нет

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Галочка, которая не ждёт

Убрать бухгалтерию

Почему лайк не держится