Какие альтернативные способы реализации автофокуса на элементе при его появлении в DOM существуют помимо useEffect?

Альтернативные способы автофокуса

Автофокус на элементе при его появлении в DOM можно реализовать несколькими способами, помимо стандартного useEffect. Каждый из них имеет свои особенности и области применения.

1. useLayoutEffect

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

import { useLayoutEffect, useRef } from 'react';

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

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

  return <input ref={inputRef} />;
}

2. Callback ref

Callback ref позволяет выполнить действие сразу после монтирования элемента. Это более гибкий подход, который не требует дополнительных эффектов.

function AutoFocusInput() {
  const inputRef = useCallback((node) => {
    node?.focus();
  }, []);

  return <input ref={inputRef} />;
}

3. MutationObserver

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

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.matches?.('input')) {
        node.focus();
        observer.disconnect();
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });

4. HTML атрибут autofocus

Самый простой способ — использовать встроенный атрибут autofocus, который работает без JavaScript, но поддерживается не всеми браузерами и может конфликтовать с React.

<input autofocus />

Вывод: Выбор способа зависит от контекста: useLayoutEffect подходит для синхронного фокуса, callback ref — для простых случаев, MutationObserver — для динамических элементов, а autofocus — для статического HTML. Используйте эти подходы для оптимизации производительности и избежания лишних рендеров.