useRef для доступу до DOM-елемента

ReactJunior~1 хв читання

Що робить `useRef` з DOM

Хук useRef() дозволяє отримати пряме посилання на DOM-елемент, відрендерений компонентом. Це аналог старого document.querySelector(), але реактивний і безпечний - React сам присвоїть посилання при монтуванні.

Кроки використання `useRef` для доступу до DOM

1. Імпортуй хук

javascript

import { useRef, useEffect } from "react";

2. Створи ref всередині компонента

javascript

const inputRef = useRef(null);

Тут inputRef.current спочатку буде null, але після рендеру React автоматично заповнить його посиланням на реальний DOM-елемент.

3. Передай ref у JSX

javascript

<input ref={inputRef} />

4. Використовуй `.current` після монтування

(наприклад, у useEffect, щоб елемент вже існував у DOM)

javascript

useEffect(() => {
  inputRef.current.focus(); // дає фокус на input
}, []);

Повний приклад

javascript

import { useRef, useEffect } from "react";

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

  useEffect(() => {
    // Коли компонент змонтувався - input вже є в DOM
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} placeholder="Я отримаю фокус при завантаженні" />
      <button onClick={() => inputRef.current.focus()}>
        Навести фокус знову
      </button>
    </div>
  );
}

Що тут відбувається:

React рендерить <input>.
Прив'язує його до inputRef.current.
Після рендеру (useEffect) ти можеш використовувати будь-які методи DOM:

.focus()
.scrollIntoView()
.select()
.play() (для відео/аудіо)
і т.д.

Приклад з прокруткою

javascript

function ScrollToBottom() {
  const endRef = useRef(null);

  const scrollToBottom = () => {
    endRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div style={{ height: 200, overflowY: "scroll", border: "1px solid #ccc" }}>
      <div style={{ height: 600 }}>Вміст...</div>
      <div ref={endRef}>Кінець списку</div>
      <button onClick={scrollToBottom}>Прокрутити вниз</button>
    </div>
  );
}

Важливо пам'ятати

Особливість	Пояснення
`ref.current` спочатку `null`	тому що DOM ще не створений до першого рендеру
Використовуй `ref.current` лише після монтування	всередині `useEffect`
Зміна `ref.current` не викликає рендер	React не стежить за ним
ref можна передавати в будь-який JSX-елемент або кастомний компонент з `forwardRef`	для проброса всередину

Підсумок

Питання	Відповідь
Що робить `useRef` з DOM	Дає посилання на реальний DOM-елемент після рендеру
Як використовувати	Створити `const elRef = useRef(null)` → передати `ref={elRef}` → звертатися `elRef.current`
Коли звертатися	Після монтування (`useEffect`)
Що можна робити	Фокус, прокрутка, зміна розмірів, виклик методів DOM

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.