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

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

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

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

Контент

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

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

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

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

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

## 1. Що повертає `useRef()`

Хук `useRef()` повертає **об'єкт-посилання**, у якого одна властивість - `.current`.

```javascript
const myRef = useRef(initialValue);
```

Значення, що повертається:

```javascript
{ current: initialValue }
```

- `current` - поточне значення посилання (можна змінювати).
- Цей об'єкт **один і той самий** між усіма рендерами компонента.

---

## Приклад:

```javascript
const ref = useRef(10);
console.log(ref.current); // 10
ref.current = 25;
console.log(ref.current); // 25
```

React **не втрачає це значення при повторних рендерах** - `ref` живе весь життєвий цикл компонента.

---

## 2. Коли корисний `useRef()`

### Основні випадки:

| Сценарій | Приклад |
|---|---|
| Доступ до DOM-елемента | `inputRef.current.focus()` |
| Зберігання таймера або ідентифікатора | `setInterval`, `requestAnimationFrame` |
| Збереження попереднього значення | `prevValue.current = value` |
| Зберігання "mutable" даних без перерендера | лічильник, кеш, локальний буфер |
| Уникнення "замикань" в ефектах | тримати актуальне посилання на змінну |

---

### Приклад - фокус на input:

```javascript
import { useRef, useEffect } from "react";

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

useEffect(() => {
    inputRef.current.focus(); // доступ до DOM-елемента
  }, []);

return <input ref={inputRef} placeholder="Фокус на мені" />;
}
```

---

## 3. Чим `useRef()` відрізняється від `useState()`

| Характеристика | `useState()` | `useRef()` |
|---|---|---|
| Зберігає дані між рендерами | Так | Так |
| Викликає ререндер при зміні | Так | Ні |
| Зберігає DOM-посилання | Ні | Так |
| Підходить для UI-стану | Так | Ні |
| Підходить для "службових" mutable даних | Іноді | Відмінно |

---

### Приклад відмінності:

```javascript
function Example() {
  const [count, setCount] = useState(0);
  const refCount = useRef(0);

const handleClick = () => {
    setCount(count + 1);     // викликає рендер
    refCount.current += 1;   // не викликає рендер
    console.log("refCount =", refCount.current);
  };

console.log("Компонент перерендерився");

return <button onClick={handleClick}>Count: {count}</button>;
}
```

Кожен клік:

- `setCount()` -> оновить інтерфейс (ререндер)
- `refCount.current++` -> просто змінить значення в пам'яті, без перерендера

---

## 4. Чи можна змінювати `.current` без перерендера?

Так, саме для цього `useRef` **і створений.**

```javascript
ref.current = newValue; // можна змінювати напряму
```

React **не стежить** за зміною `.current`,
тому зміна не викликає повторний рендер компонента.

Ця поведінка робить `useRef` ідеальним для:

- лічильників, таймерів, кешів, буферів;
- прапорців на кшталт `isMounted`;
- зберігання будь-яких змінюваних значень, що не впливають на UI.

---

## Підсумок

| Питання | Коротка відповідь |
|---|---|
| Що повертає `useRef()` | Об'єкт `{ current: initialValue }` |
| Коли корисний | Для DOM-доступу, зберігання mutable-даних, попередніх значень, таймерів |
| Чим відрізняється від `useState()` | `useState` викликає ререндер при зміні, `useRef` - ні |
| Чи можна змінювати `.current` без рендера | Так, можна напряму змінювати `.current`, React не перерисує компонент |

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

Для рев’юера

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

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