Питання на глибину для useRef

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

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 не перерисує компонент

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

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

Premium

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