Есть компонент на React с input. Мы нажимаем на кнопку «Показать input» и показывается input, но на него не ставится фокус. Нужно это пофиксить. Предложи как можно больше решений.

Фокус нужно поставить после появления input в DOM: через autoFocus, callback ref либо effect, зависящий от состояния показа.

Короткий ответ

Что ответить на собеседовании

Фокус нужно поставить после появления input в DOM: через autoFocus, callback ref либо effect, зависящий от состояния показа.

Подробный разбор

Ответ с пояснениями

Фокус нужно поставить после появления input в DOM: через autoFocus, callback ref либо effect, зависящий от состояния показа.

Простой вариант — условно рендерить <input autoFocus />. Другой — callback ref: node => { if (node) node.focus(); }. Для управления через useRef можно вызвать focus в useEffect или useLayoutEffect после show=true; layout effect полезен, если нужно избежать визуального скачка. Вызов сразу после setShow может увидеть старый DOM. Произвольный setTimeout ненадёжен.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее