Ответ
Optimistic UI — это подход, при котором интерфейс мгновенно обновляется, предполагая успешное выполнение действия, до получения подтверждения от сервера. Если запрос завершится ошибкой, UI откатывает изменения.
Плюсы:
- Улучшает воспринимаемую скорость работы приложения.
- Пользователь видит результат действий без задержки.
Минусы:
- Требует обработки ошибок и отката изменений.
- Может вызвать рассинхронизацию, если сервер вернет неожиданные данные.
Пример:
function handleLike() {
const oldLikes = post.likes;
setPost({ ...post, likes: oldLikes + 1 }); // Оптимистичное обновление
fetch('/like', { method: 'POST' })
.catch(() => {
setPost({ ...post, likes: oldLikes }); // Откат при ошибке
});
}Используется в соцсетях, формах, интерактивных элементах.
Ответ 18+ 🔞
А, слушай, вот это тема — Optimistic UI! Это когда ты такой: "Ну всё, я сделал, давай сразу покажем, что получилось, а сервер пусть потом подтягивается, если не обосрётся". По сути, ты врёшь пользователю, но во благо, чтобы он не пялился на спиннеры.
Что хорошего, а?
- Приложение летает, как будто на коксе. Нажал — бац, и лайк уже стоит. Пользователь доволен, чувствует себя богом интерфейсов.
- Исчезает эта ебучка с ожиданием, когда там сервер, старый пердун, доползёт до базы и обратно.
А что за подводные ебучки?
- Ну, главная — а если сервер всё-таки обосрётся? Тогда надо всё откатывать, как будто ничего и не было. А пользователь уже успел скриншот сделать и твитнуть "я лайкнул!". Пиздец, позор на весь интернет.
- Может получиться рассинхрон пиздецкий. Ты думаешь, у тебя 100500 лайков, а сервер такой: "Не, чувак, там только 3, и один из них — твоя мамка". И пошла жара.
Смотри, как это выглядит в коде, реальный пример:
function handleLike() {
// Запоминаем, сколько лайков было ДО того, как мы начали ебаться
const oldLikes = post.likes;
// А тут сразу, нагло, без спроса, прибавляем лайк! Оптимизм, блядь!
setPost({ ...post, likes: oldLikes + 1 });
// И только ПОТОМ, тихонько, стыдливо, шлём запрос серверу
fetch('/like', { method: 'POST' })
.catch(() => {
// А если сервер нас послал нахуй (ошибка), то делаем вид, что ничего не было. Откатываемся.
setPost({ ...post, likes: oldLikes }); // "Ой, извините, пошутил"
});
}Где это юзают? Да везде, где люди нетерпеливые! Соцсетки (лайки, репосты), всякие формы отправки, кнопочки "добавить в корзину". В общем, везде, где можно немного схитрить, чтобы пользователь не заскучал и не ушёл. Главное — не обосраться с откатом, а то будет "ёперный театр".