open atlas
↑ К треку
Архитектура фронтенда FE · 01 · 07

Форма состояния: тест с выбором ответа

Тест с множественным выбором по всему юниту про форму state — derived state, server cache vs клиентский state, colocation, URL-состояние и трейдоффы normalized.

FE Senior ◷ 13 min
Уровень
ОсновыJuniorMiddleSenior

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

Цель

Убедись, что связываешь стержень юнита: выводи выводимое, отделяй server cache от клиентского state, колоцируй у нижнего читателя, шарящееся view-состояние выноси в URL, а реляционные данные нормализуй только когда их мутируешь.

Викторина

Список товаров получают из API, и его читают три соседних компонента на одном экране. Какая форма правильная?

Викторина

Бейдж-счётчик показывает '127', а в списке 9 строк; count лежит в useState рядом с массивом results. В чём корневая причина и фикс уровня сеньора?

Викторина

Булево open/closed для тултипа лежит в корневом store приложения «чтобы было доступно везде». Почему это неверная форма?

Викторина

Фильтры и id открытой детали лежат только в useState. Скопированная ссылка открывает у коллеги пустой дефолтный вид, а рефреш тоже всё сбрасывает. Какую форму упустили?

Викторина

Клиентский редактор держит threads, posts и users вложенно, как вернул API, и пользователей переименовывают постоянно. После переименования часть вью показывает старое имя. Почему и какая форма это чинит?

Викторина

Команда хранит selectedUser как целый объект user в state. После правки в другом месте, обновившей этого user, выбор всё ещё показывает старые поля. В чём урок про форму?

Итог

Стержень юнита — одно дерево решений: если значение выводимо (count, выбранный объект), не храни его — вычисляй в рендере или джойни по id. Если это state, спроси, чьё оно — полученные с сервера данные это cache (React Query/SWR), шарящееся клиентское view-состояние идёт в URL, а остальное колоцируется у нижнего общего предка читателей, чтобы радиус ререндеров был мал. Реляционные клиентские данные нормализуй в byId-словарь только когда их мутируешь. Теперь, когда встретишь любой из этих дистракторов в реальном PR — выводимое значение рядом со своим источником, полученные данные в Redux-слайсе, флаг с одним читателем в корне, снимок объекта вместо join по id — ты знаешь имя ошибки формы, сбой, который она вызовет, и структурный фикс, который её убирает.

Что-то непонятно?

Задай вопрос по этому уроку. Вопросы анонимны и попадают напрямую автору — урок станет лучше.

хоткеи развернуть
поиск
K
пред. пьеса
k
след. пьеса
j
тиры
t
это меню
?
sources3
expand
  1. 01
  2. 02
  3. 03

Trademarks belong to their respective owners. Editorial reference only.