Назад

Данные и состояние · Средняя

Продумать кеш и обновление данных

Определить, когда данные кешируются, обновляются, инвалидируются или показываются оптимистично.

Данные и состояние: визуальный контекст этапа
Аудиопересказ пунктаПолная версия материала для прослушивания
Прослушано 0%
Скачать

Быстро понять за 2 минуты

Определить, когда данные кешируются, обновляются, инвалидируются или показываются оптимистично.

Главная пользаПравильный cache strategy делает интерфейс быстрым и не показывает пользователю устаревшее состояние после действий.
Первое действиеОпределите stale time для данных.
Готово, когдаПосле действия UI показывает актуальные данные.

Контекст

Интерфейс должен корректно работать с loading, error, empty, optimistic updates и конфликтами данных.

ЦельПравильный cache strategy делает интерфейс быстрым и не показывает пользователю устаревшее состояние после действий.
ДействиеОпределите stale time для данных.
ПроверкаПосле действия UI показывает актуальные данные.

Что это дает

Правильный cache strategy делает интерфейс быстрым и не показывает пользователю устаревшее состояние после действий.

Как выполнить

  1. Определите stale time для данных.
  2. Инвалидируйте кеш после мутаций.
  3. Осторожно используйте optimistic update.

Критерии приемки

  • После действия UI показывает актуальные данные.
  • Нет лишних запросов.
  • Ошибки optimistic update откатываются.

Типичные ошибки

  • Хранить все в глобальном state.
  • Не инвалидировать списки после изменения.
  • Показывать старые данные как новые.

Инструменты

TanStack QuerySWRRedux Toolkit Query

Рабочий артефакт

API integration

Матрица интеграций

Связка экранов, endpoints, loading states, error states, cache и refresh rules.

  • Endpoints
  • Error states
  • Cache rules
  • Retries

Контроль качества

Артефакт

Матрица интеграций

Метрика проверки

После действия UI показывает актуальные данные.

Когда пересматривать

После изменения пользовательского сценария, дизайна, API-контрактов, релизов и замечаний по доступности.

Что передать дальше

Сценарий, состояние интерфейса, источник данных, критерии доступности, тесты и ограничения адаптива.

Перед отметкой выполнено: После действия UI показывает актуальные данные.

Как применять

Начинайте с пользовательского действия и состояния интерфейса. Затем проверьте данные, адаптивность, доступность, ошибки и производительность. Хороший frontend-пункт помогает понять, что увидит пользователь, как интерфейс поведет себя в крайних состояниях и чем подтверждается качество реализации.

Режим обучения

Прочитайте материал, прослушайте аудио и проверьте понимание по коротким вопросам. Ответ раскрывается после попытки сформулировать его самостоятельно.

1. Какую основную пользу должен дать этот пункт?
2. Какой первый практический шаг нужно выполнить?
3. По какому критерию можно понять, что пункт выполнен?