Как модифицировать и отображать данные во frontend?

Что проверяют

Понимаете ли вы весь путь данных: откуда они приходят, где хранятся, кто их меняет и как изменения попадают в интерфейс. Следом обычно спрашивают, чем серверное состояние отличается от клиентского и как обновить список после мутации.

Как отвечать

Выстройте ответ по слоям на примере своего фреймворка, скажем React:

• получение: не голый fetch в useEffect, а библиотека серверного состояния, TanStack Query или SWR. Они дают кеш, дедупликацию, повторы, статусы загрузки и ошибки. В Next.js App Router данные часто грузятся прямо в серверном компоненте;
• преобразование: приводите ответ API к форме, удобной интерфейсу, в одном месте (адаптер или select в запросе). Производные значения вроде отфильтрованного списка вычисляйте при рендере, при необходимости через useMemo, а не храните отдельным состоянием;
• изменение: только неизменяемо, через map, filter и спред. Мутация объекта в состоянии не вызовет перерендер и сломает сравнение по ссылке;
• мутации на сервер: useMutation с инвалидацией нужного ключа или оптимистичным обновлением и откатом при ошибке;
• клиентское состояние: то, чего нет на сервере (открытые панели, черновик формы), держите в useState, контексте или Zustand, Redux Toolkit уместен в большом приложении;
• отображение: стабильный key из id, виртуализация для длинных списков, обязательные состояния «пусто», «загрузка» и «ошибка».

Во Vue и Angular схема та же: computed вместо useMemo, Pinia вместо Redux, сигналы в Angular.

Где спотыкаются

Копируют ответ сервера в useState и потом вручную синхронизируют две версии данных. Отсюда рассинхрон после каждой мутации.

Используют индекс массива как key. При сортировке или удалении элемента React переиспользует не те узлы, и в полях ввода остаются чужие значения.

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