DOM и React Senior Эффекты и жизненный цикл обновлено
Оптимистичное обновление
Условие
Кнопка «лайк» сразу увеличивает счётчик, затем зовёт save(). Если save отклонился - счётчик возвращается назад и показывается <div class="error">.
Что проверяют тесты
сразу увеличивает
успех оставляет значение
откат при ошибке
повторный успех убирает ошибку
Как подойти
Оптимистичное обновление убирает ожидание сети из восприятия интерфейса. Два обязательных элемента: откат при ошибке и функциональная форма сеттера, потому что за время запроса могли прийти другие изменения. Сброс ошибки в начале действия - деталь, которую забывают, и пользователь видит «не сохранилось» поверх успешного результата.
Подсказки: 3
- Обновляй состояние до запроса, а не после ответа.
- Откат делай функциональной формой - между кликом и ошибкой значение могло измениться.
- Сбрасывай ошибку в начале нового действия.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.