> Какие альтернативные способы установки фокуса в React без использования useEffect (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Т-Банк

Стек: React

> Пример ответа

В React фокус можно установить без useEffect, используя ref-колбэки (callback refs). Они вызываются синхронно сразу после монтирования элемента, что гарантирует установку фокуса до первого рендера:

JSX
function AutoFocusInput() {
  return (
    <input
      ref={(node) => node && node.focus()}
      placeholder="Фокус установлен без useEffect"
    />
  );
}

Также можно использовать атрибут autoFocus (нативный HTML), но он работает только при первом монтировании и не подходит для динамических сценариев.

Для условного фокуса (например, после клика) применяется императивное управление через ref:

JSX
function Form() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Установить фокус</button>
    </>
  );
}

Важно: useEffect всё равно может понадобиться для асинхронных операций (например, фокус после загрузки данных), но для синхронных сценариев ref-колбэки - более производительный и прямой способ.