Как сфокусировать input при монтировании компонента?

Суть

Чтобы поставить фокус в поле ввода сразу после появления на экране, используют ref и useEffect (или useLayoutEffect, если фокус нужен до paint).

Классический паттерн

import { useEffect, useRef } from 'react';

function SearchField() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} placeholder="Поиск…" />;
}

Пустой массив зависимостей означает «один раз после mount». ?.focus() безопасен, если ref ещё не привязан.

Нюансы для собеседования

1. autoFocus — атрибут тоже работает, но хуже контролируется (модалка, SSR, повторный mount). На собеседовании чаще ждут именно ref + effect.
2. useLayoutEffect — синхронно после DOM-мутаций, до отрисовки браузером; меньше «мигания», если поле видно сразу.
3. Доступность — не фокусируйте агрессивно на каждом экране: это мешает клавиатурной навигации и screen reader. Обычно фокус уместен в модалке, wizard-шаге, форме поиска.
4. Условный mount — если input появляется после isOpen, effect с [isOpen] или remount через key надёжнее, чем «вечный» пустой deps.

Типичная ошибка

Вызывать focus() прямо в теле компонента: ref ещё null, а повторные рендеры будут дёргать фокус снова. Только в effect/layout-effect или в обработчике события.

На практике: ref + useEffect(() => { ref.current?.focus(); }, []) — стандартный и ожидаемый ответ.