React и Redux

У управляемого поля значение задаётся state React через prop value и обработчик onChange — state единственный источник истины, а DOM лишь отражает его. Неуправляемое поле держит значение в DOM без prop value; читают его через ref.

useState добавляет локальный state в функциональный компонент, возвращая текущее значение и сеттер, который перерендеривает при изменении. useEffect запускает побочные эффекты (подписки, запросы, работу с DOM) после рендера, а массив зависимостей управляет повторным запуском плюс необязательная очистка. useContext читает значение ближайшего провайдера для данного контекста, перерендеривая при его изменении.

Props — это входные данные, переданные сверху от родителя; внутри получающего компонента они доступны только для чтения, и он не должен их мутировать. State — данные, которыми компонент владеет и управляет сам; их обновление (через setState или сеттер useState) планирует перерендер. Props текут в одну сторону (от родителя к ребёнку), state локален. Изменение любого из них вызывает перерендер компонента.

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

У классового компонента три фазы. Монтирование вызывает constructor, getDerivedStateFromProps, render, затем componentDidMount. Обновление — shouldComponentUpdate, render, getSnapshotBeforeUpdate, затем componentDidUpdate. Размонтирование — componentWillUnmount.

Первый аргумент — либо объект, сливаемый в state, либо функция-апдейтер (prevState, props) => partialState — форму с функцией берут, когда следующее состояние зависит от предыдущего, чтобы избежать багов устаревшего state.

Виртуальный DOM — это лёгкое дерево в памяти, описывающее UI. На каждом рендере React сравнивает новое дерево с предыдущим (согласование) и применяет минимальные мутации реального DOM: разные типы элементов заменяют поддерево, одинаковые типы патчат props. key даёт каждому элементу списка стабильную идентичность, чтобы React сопоставлял элементы между рендерами, а не пересоздавал их, сохраняя state и избегая неверного переиспользования.

useEffect запускает побочные эффекты после рендера — подписки, запросы, работу с DOM — с очисткой при смене зависимостей или размонтировании. useMemo мемоизирует дорогое вычисленное значение между рендерами по его зависимостям. useCallback мемоизирует ссылку на функцию (частный случай useMemo), чтобы она оставалась стабильной для мемоизированных детей или зависимостей эффектов. Злоупотребление ими на дешёвых значениях стоит дороже, чем экономит.

Ради производительности React откладывает применение setState, а не меняет state и не перерендеривает тут же. Он собирает несколько обновлений из одного тика и сбрасывает их одним перерендером — это батчинг. React 18 авто-батчит и в промисах, и в таймерах.

Презентационный («глупый») компонент отвечает лишь за то, как всё выглядит — берёт props и рисует разметку, почти без state и без логики данных. Контейнерный («умный») отвечает за то, как всё работает — грузит данные, читает store, обрабатывает события и кормит детей.

Используйте componentDidMount. Он выполняется после фиксации первого рендера, поэтому setState с данными запускает второй рендер, отрисовывающий результат. componentWillMount выполняется до первого рендера, где setState не планирует перерендер, и он устарел.

Каждый рендер даёт новый случайный key, поэтому React видит другую идентичность каждый раз и размонтирует старый инстанс ради нового. Компонент теряет весь state, заново гоняет эффекты mount/unmount, теряет фокус и прокрутку и платит полную стоимость перемонтирования.

Главный баг: у useEffect нет массива зависимостей, поэтому он перезапрашивает на каждый рендер — а каждый setLocation вызывает новый рендер, фактически цикл; задайте [props.locationId]. spotTimes — это МАССИВ объектов с одним ключом, но читается как spotTimes[s.id] — неверная форма; постройте один объект или Map по id. У <div> в map нет key, что ломает согласование. Мелочи: === и состояние загрузки для location.

У обоих одинаковая сигнатура и семантика массива зависимостей, но выполняются они в разное время. useEffect выполняется асинхронно после отрисовки браузером, поэтому никогда не блокирует визуальные обновления — выбор по умолчанию для большинства эффектов.

React хранит хуки компонента упорядоченным списком (связным списком записей хуков) на его fiber. На каждом рендере он обходит этот список в порядке вызова, сопоставляя N-й вызов хука с N-й сохранённой записью, чтобы восстановить state. Имён нет — позиция и есть единственная идентичность.