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

Key помогает React сопоставить элементы между рендерами и сохранить их состояние. Он должен быть стабильным идентификатором сущности, а индекс массива опасен при вставках и сортировке.

useEffect синхронизирует компонент с внешней системой: подпиской, таймером, запросом или DOM API. Вычисления из props и state не следует помещать туда без необходимости.

React сравнивает новое дерево элементов с предыдущим и выбирает минимальный набор изменений DOM. Тип элемента и key влияют на то, будет ли состояние компонента сохранено.

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

Значение поля хранится в React state и меняется через обработчик. Такой подход даёт единый источник истины и удобную валидацию, но при больших формах требует аккуратной оптимизации.

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

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

Изменение state, props или context запускает рендер. Частые причины лишних обновлений — нестабильные объекты и callback, слишком широкий context и состояние, поднятое выше необходимого.

memo полезен для компонента, который часто получает те же props и дорого рендерится. Это не универсальная оптимизация: сначала измеряют проблему и проверяют стабильность props.

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