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

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

В React можно установить фокус без useEffect через ref callback, атрибут autoFocus, forwardRef с useImperativeHandle, или синхронно в обработчике события. Ref callback выполняется сразу после монтирования узла, что позволяет избежать лишнего рендера. Для динамического фокуса подходит useLayoutEffect, который выполняется синхронно до отрисовки браузером.

Подробное объяснение

Основной способ установки фокуса в React - это ref callback, который вызывается сразу после монтирования DOM-узла. В отличие от useEffect, ref callback не зависит от цикла рендера и не вызывает дополнительных обновлений. Это особенно полезно для начальной установки фокуса при монтировании компонента.

Атрибут autoFocus - самый простой способ для полей ввода, но он работает только при первом монтировании и не подходит для динамических сценариев.

Для управления фокусом из родительского компонента можно использовать forwardRef в комбинации с useImperativeHandle. Это позволяет дочернему компоненту предоставить метод focus, который родитель вызывает синхронно.

useLayoutEffect - альтернатива useEffect, которая выполняется синхронно после всех мутаций DOM, но до того, как браузер отрисует изменения. Это подходит для случаев, когда нужно установить фокус после изменения состояния или пропсов.

На практике

Ref callback - предпочтительный способ для начальной установки фокуса. Он работает как в классовых, так и в функциональных компонентах, и не требует дополнительных зависимостей.

Для динамического фокуса (например, при появлении нового элемента в списке) используйте useLayoutEffect с ref. Это гарантирует, что фокус будет установлен до того, как пользователь увидит обновлённый интерфейс.

При работе с порталами или модальными окнами используйте ref callback для установки фокуса на первый фокусируемый элемент после открытия.

Пример кода

JSX
// Ref callback для начального фокуса
function InputWithFocus() {
  return <input ref={(node) => node?.focus()} />;
}

// forwardRef + useImperativeHandle для управления из родителя
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus()
  }));
  return <input ref={inputRef} />;
});

// useLayoutEffect для динамического фокуса
function DynamicList() {
  const lastItemRef = useRef(null);
  const [items, setItems] = useState(['first']);
  
  useLayoutEffect(() => {
    lastItemRef.current?.focus();
  }, [items.length]);
  
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          <input ref={index === items.length - 1 ? lastItemRef : null} />
        </li>
      ))}
    </ul>
  );
}

Как отвечать на собеседовании

Начните с ref callback как основного решения, затем упомяните autoFocus для простых случаев. Объясните, почему useEffect не оптимален: он выполняется асинхронно после рендера, что может вызвать мерцание или лишние перерисовки. Для динамических сценариев предложите useLayoutEffect, подчеркнув его синхронность. Если спросят про производительность, отметьте, что ref callback не вызывает повторный рендер.

Что проверяет интервьюер

Интервьюер оценивает понимание жизненного цикла React-компонентов, различие между синхронными и асинхронными операциями, а также знание альтернативных API (ref callback, useLayoutEffect, forwardRef). Важно показать, что вы понимаете trade-off между useEffect и синхронными подходами.

Типичные ошибки

Использование useEffect для фокуса без необходимости - это создаёт лишний рендер и может вызвать проблемы с производительностью. Другая ошибка - попытка установить фокус в ref callback условно, не проверяя существование узла. Также часто забывают, что autoFocus не работает для динамически добавляемых элементов.