Отображение инпута с автоматическим фокусом по нажатию кнопки

Условие

Требуется, чтобы после клика на кнопку сразу появлялось текстовое поле и получало фокус. Проверьте, корректно ли реализовано данное поведение, и при необходимости внесите поправки.

import React, { useState, useRef } from 'react';

const ToggleComponent = () => {
    const [showInput, setShowInput] = useState(false);
    const inputElementRef = useRef(null);

    const toggleVisibility = () => {
        setShowInput(prev => !prev);
        if (inputElementRef.current) {
            inputElementRef.current.focus();
        }
    };

    return (
        <>
            <button onClick={toggleVisibility}>Toggle Input</button>
            {showInput && <input ref={inputElementRef} />}
        </>
    );
};

export default ToggleComponent;

Ответ

Сразу после setShowInput новый input ещё не добавлен в DOM. Перенесите focus в эффект, зависящий от showInput, либо в callback ref.

Оставьте обработчику только переключение state, а в компонент добавьте:

React.useEffect(() => {
  if (showInput) inputElementRef.current?.focus();
}, [showInput]);

Эффект выполнится после commit, когда ref уже установлен. При скрытии input ref станет null; важно не пытаться фокусировать старый элемент перед удалением.