Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «useRef для доступу до DOM-елемента». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить `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>
  );
}
```

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

1. React рендерить `<input>`.
2. Прив'язує його до `inputRef.current`.
3. Після рендеру (`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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати391 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.