awesome-everything EN
↑ Обратно к восхождению

Архитектура фронтенда

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

Суть Тест с множественным выбором по всему юниту про форму state — derived state, server cache vs клиентский state, colocation, URL-состояние и трейдоффы normalized.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на senior-высоте — в орбите
◷ 13 min

Шесть вопросов, проходящих через весь юнит. Каждый отражает решение, которое ты принимаешь до того, как тянешься к любой библиотеке 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-словарь только когда их мутируешь. Каждый дистрактор выше — реальная ошибка формы: глобализация выводимого значения, кэширование полученных данных как клиентского state, подъём флага с одним читателем в корень или снимок объекта, который должен быть join по id.

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

Trademarks belong to their respective owners. Editorial reference only.