Вопросы на собеседовании: React-разработчик

Компонент должен вычислять одинаковый JSX из одинаковых props, state и context без побочных эффектов во время рендера.

• Рендер может запускаться повторно, приостанавливаться или отменяться, поэтому сетевым запросам и подпискам не место в теле компонента.
• Обработчики событий выполняют эффекты по действиям пользователя, а useEffect синхронизируется с внешними системами после commit-фазы.
• Локально менять значения, созданные в текущем рендере, допустимо, но изменение общих объектов делает результат зависимым от порядка.

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

• Обработчик события сохраняет значения state из рендера, в котором он был создан.
• Несколько чтений после setState в одном обработчике всё равно вернут старый снимок.
• Если следующее значение зависит от предыдущего, следует использовать функциональный updater.

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

• Вызов хука внутри условия, цикла или вложенной функции может сдвинуть позиции следующих хуков.
• Недостаточно того, что ветка выполняется обычно, порядок должен сохраняться при любом возможном рендере.
• Условную логику следует поместить внутрь callback хука или в отдельно отрисовываемый компонент.

Функциональный updater нужен, когда следующее состояние зависит от предыдущего.

• React передаёт последнее значение из очереди в функцию вроде setCount(count => count + 1).
• Это не даёт нескольким обновлениям в одном событии использовать один и тот же захваченный снимок.
• Такой подход также убирает лишние зависимости, если мемоизированному callback состояние нужно только для вычисления замены.

useEffect синхронизирует компонент с внешней системой после того, как React применил изменения интерфейса.

• Зависимости включают каждое реактивное значение, прочитанное эффектом, в том числе props, state и функции из компонента.
• React сравнивает зависимости через Object.is и повторяет эффект после commit-фазы при изменении одной из них.
• Пустой массив означает отсутствие реактивных значений, а не разрешение убрать зависимости для удобства.

Cleanup должен отменять подписку, таймер, соединение или другую внешнюю работу, созданную setup-частью этого эффекта.

• React выполняет cleanup перед повтором эффекта с новыми зависимостями и после размонтирования.
• В Strict Mode для разработки дополнительный цикл setup и cleanup выявляет код, который не умеет безопасно переподключаться.
• Cleanup должен использовать те же идентификаторы и ссылки на обработчики, которые зарегистрировал setup.

useLayoutEffect выполняется после обновления DOM, но до отрисовки браузером, а useEffect обычно запускается после неё.

• Layout effect подходит для измерения DOM, которое должно сразу повлиять на видимую раскладку.
• Поскольку он блокирует отрисовку, лишняя работа в useLayoutEffect ухудшает отзывчивость.
• Следует предпочитать useEffect, если без layout effect пользователь не увидит неверный промежуточный кадр.

useMemo кеширует результат вычисления между рендерами при неизменных зависимостях, но остаётся оптимизацией, а не семантической гарантией.

• React выполняет функцию во время рендера, поэтому она должна быть чистой.
• Фреймворк может сбросить кеш, поэтому корректность программы не должна от него зависеть.
• Хук полезен, когда дорогое вычисление или стабильное производное значение измеримо сокращает работу.

useMemo добавляет сравнение, расход памяти и сложность кода, если вычисление дешёвое или зависимости часто меняются.

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

useCallback мемоизирует ссылку на функцию, а не результат её вызова.

• React возвращает прежнюю функцию, пока все зависимости равны по Object.is.
• Стабильная ссылка важна, когда функция передаётся мемоизированному дочернему компоненту или входит в зависимости другого хука.
• Хук не отменяет создание встроенного функционального выражения и не удешевляет выполнение callback.

useMemo кеширует вычисленное значение, а useCallback кеширует саму ссылку на функцию.

• useMemo(() => value, deps) сохраняет возвращённое значение.
• useCallback(fn, deps) концептуально равен useMemo(() => fn, deps).
• Оба хука оправданы при чувствительных к ссылкам потребителях или дорогой работе и требуют полного списка зависимостей.

useRef хранит стабильный изменяемый объект между рендерами и также может указывать на DOM-узел под управлением React.

• Изменение ref.current не вызывает рендер, поскольку ref находится вне потока визуального состояния React.
• DOM refs позволяют выполнять императивные действия вроде фокуса, выделения и измерения.
• В ref можно хранить идентификатор таймера, если он нужен обработчикам, но не участвует в отрисовке.

Чтение или изменение ref.current во время рендера может сделать результат зависимым от скрытого изменяемого состояния и нарушить чистоту.

• React может повторять, перезапускать или отменять рендер, поэтому момент изменения ненадёжен.
• Инициализация под стабильной проверкой на null является узким допустимым случаем, если всегда создаёт эквивалентный объект.
• Обычные чтения и записи ref должны происходить в эффектах или обработчиках событий.

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

• State планирует рендер и участвует в модели снимков React.
• Изменения ref происходят сразу, но React не наблюдает их для отрисовки.
• Дублирование одного источника истины одновременно в state и ref создаёт риск рассинхронизации.

useContext читает значение ближайшего подходящего provider выше вызывающего компонента в отрисованном дереве.

• Provider определяется положением в дереве, а не файлом с объявлением компонентов.
• Provider, возвращённый тем же компонентом, не влияет на более ранний вызов useContext внутри него.
• При отсутствии provider React возвращает default value, переданное при создании context.

Потребитель рендерится снова, когда ближайший provider получает value, не равное предыдущему по Object.is.

• React.memo не блокирует передачу свежего значения context потребителю.
• Новый объект или функция имеют новую ссылку, даже если их содержимое выглядит одинаковым.
• Разделение несвязанных данных по разным context ограничивает число потребителей, затронутых обновлением.

Такой объект получает новую ссылку при каждом рендере provider, поэтому все потребители видят изменение context.

• Мемоизировать объект стоит только тогда, когда поля и зависимости callback действительно могут сохранять стабильность.
• Разделение состояния и действий или нескольких context может эффективнее уменьшить распространение обновлений.
• Оптимизация provider особенно важна для широкого context с множеством часто рендерящихся потребителей.

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

• Reducer получает текущее состояние и action, после чего возвращает следующее состояние.
• Dispatch описывает произошедшее событие, не раскрывая обновление каждого поля.
• Хук полезен для сложных локальных процессов, но сам по себе не делает состояние глобальным.

Reducer должен быть чистым, детерминированным и возвращать новое состояние, если переход меняет данные.

• Нельзя изменять существующий state, поскольку React использует идентичность для обнаружения изменений.
• Сетевым запросам, таймерам и логированию как побочным эффектам не место внутри reducer.
• Для неизвестных action нужна явная политика, обычно возврат текущего состояния или исключение в режиме разработки.

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

• Он хранит допустимые переходы в одном месте и предотвращает частичные комбинации связанных обновлений.
• useState остаётся понятнее для нескольких независимых значений с простыми заменами.
• Само наличие нескольких свойств в объекте ещё не оправдывает дополнительный код reducer.