События и локальное состояние

Вы сможете обработать пользовательское намерение, выбрать минимальную форму state и устранить дубли, невозможные сочетания и скрытую связь компонентов.

До начала достаточно state snapshots, batching, props и неизменяемые обновления. В конце должен появиться не конспект, а фильтруемый список с selection, редактированием и предсказуемыми переходами состояния.

JSX prop события получает функцию. onClick={submit} передаёт ссылку, а onClick={submit()} вызывает функцию во время render и передаёт её результат. Inline arrow полезна для аргументов. Handler — правильное место для эффекта, причиной которого является конкретное действие пользователя.

Рабочая проверка. Проверьте, что команда удаления не вызывается до клика и получает правильный id.

Типичная поломка. Вызвать setter или сетевую команду при построении JSX.

События проходят capture и bubble phases. stopPropagation останавливает дальнейшее распространение, preventDefault отменяет browser default action; это разные операции. Лучше передавать доменный callback (onSelect) через props, чем заставлять родителя угадывать намерение по любому клику внутри карточки.

Рабочая проверка. Сделайте вложенную кнопку удаления, которая не выбирает карточку, но остаётся клавиатурной кнопкой.

Типичная поломка. Назначить click всей вложенной разметке и отменять события во многих потомках.

State хранит изменяемый минимум. Если visibleItems определяется items, query и sort, его вычисляют во время render. Дублированный state требует синхронизации и создаёт промежуточные несогласованные снимки. Дорогое чистое вычисление можно оптимизировать, но кэш не превращает результат в независимый источник истины.

Рабочая проверка. Удалите isEmpty и filteredItems из state, оставив исходные данные и параметры.

Типичная поломка. Effect, который при каждом изменении props пересчитывает derived state через setter.

Выбранную запись часто лучше хранить как selectedId, а сам объект находить в актуальном массиве. Если сохранить копию объекта, обновление server data оставит selection устаревшим. ID должен быть стабильным и nullable только когда отсутствие выбора — допустимое состояние.

Рабочая проверка. Обновите название товара в исходных данных и убедитесь, что выбранная карточка показывает новое значение.

Типичная поломка. Хранить одновременно selectedId и selectedProduct без явной независимой причины.

Избегайте противоречивых boolean-флагов вроде isLoading, hasError, hasData. Union или один status делает допустимые состояния конечными. Вложенный объект обновляется копированием изменившегося пути. Глубина state часто сигнализирует, что данные стоит нормализовать по id или разделить по владельцам.

Рабочая проверка. Замените три boolean-флага загрузки на union и удалите недостижимые ветви JSX.

Типичная поломка. Разрешить одновременно isLoading и hasError без определённого смысла.

Если два siblings должны согласованно видеть одно решение, state поднимают к ближайшему общему владельцу. Controlled-компонент получает value и callback, uncontrolled хранит локальный default. Не переключайте режим после mount. Поднимать всё к корню тоже вредно: это расширяет область обновлений и публичные контракты.

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

Пара props выражает controlled API: родитель владеет значением, компонент сообщает намерение изменить его.

Рабочая проверка. Свяжите две панели одним selection в ближайшем общем родителе.

Типичная поломка. Копировать prop в локальный state каждого sibling и синхронизировать Effects.

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

Рабочая проверка. Выделите чистый переход renameItem(state, payload) и вызовите его из submit и keyboard shortcut.

Типичная поломка. Размазать один доменный переход по нескольким DOM-handlers.

Initializer useState(() => expensive()) используется только при создании identity компонента. Изменение prop не переинициализирует state. Если локальный draft должен сбрасываться при смене сущности, выразите новую identity через key или поднимите draft к владельцу; Effect-синхронизация часто показывает старый кадр и стирает пользовательский ввод.

Рабочая проверка. Переключите recordId во время редактирования и выберите явную policy: сохранить draft по id или сбросить формой с key.

Типичная поломка. Каждый prop копировать в state «на случай редактирования».

Переработайте доску заявок: уберите сохранённые filteredItems и isEmpty, замените выбранный объект на id, сделайте reducer-подобные event handlers и сохраните корректность при обновлении данных сервера.

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