Реф для элемента

В курсе JavaScript вы находили элементы через querySelector() и сами их меняли. В React это почти не нужно: вы описываете страницу с помощью JSX, а элементы меняет React. Но кое-что можно сделать только с самим элементом. Чаще всего это установка курсора в текстовое поле методом focus(), чтобы пользователь мог сразу печатать.

Для этого в React есть рефы (от слова reference, «ссылка»). Реф создаётся хуком useRef и передаётся элементу в атрибуте ref:

import { useRef } from "react";

export default function TicketName() {
    const nameRef = useRef(null);

    function handleEdit() {
        nameRef.current.focus();
    }

    return (
        <p>
            <input ref={nameRef} />
            <button onClick={handleEdit}>Изменить имя</button>
        </p>
    );
}

useRef(null) возвращает объект с одним свойством, current, которое сначала равно null. Когда React помещает input на страницу, он записывает этот элемент в nameRef.current. С этого момента nameRef.current — тот самый элемент, который нашёл бы querySelector(), и клик по кнопке ставит курсор в поле.

React заполняет реф, только когда элемент уже на странице. При первой отрисовке nameRef.current всё ещё равен null. Поэтому пользуйтесь рефами в обработчиках и в эффектах, которые выполняются после отрисовки, но никогда не обращайтесь к ним в самом JSX. Эффект с [] может поставить курсор в поле, как только компонент появится:

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

Почему бы просто не взять querySelector()? Он ищет по всей странице, а компонент не знает, что на ней ещё есть. Если на странице две формы билета, он всегда найдёт первую. Реф же всегда указывает на собственный элемент компонента.