Використання React Refs та хука useRef

React використовує декларативний підхід. Ви оновлюєте стан (state), і React оновлює інтерфейс (UI). Це працює для більшості завдань.

Але іноді потрібно вийти за межі Virtual DOM. Можливо, вам знадобиться безпосередньо звернутися до реального HTML-елемента. Саме тут на допомогу приходять Refs та хук useRef.

Що таке Ref? Ref — це покажчик. Він напряму пов'язує React із нативним DOM-вузлом.

Чому варто використовувати useRef замість useState? Оновлення стану (state) викликає ререндер (re-render). Це означає, що React перемальовує компонент на екрані. Оновлення Ref не викликають ререндер. Це робить їх ідеальними для значень, які змінюються, але не потребують негайного відображення в UI.

Поширені випадки використання: • Автоматичне фокусування поля введення. • Керування відео- або аудіоелементами (play/pause). • Вимірювання ширини або висоти елемента. • Зберігання ID таймерів для інтервалів (intervals) або таймаутів (timeouts).

Як використовувати useRef:

  1. Імпортуйте useRef з React.
  2. Ініціалізуйте його: const myRef = useRef(null).
  3. Прикріпіть його до елемента: <input ref={myRef} />.
  4. Отримайте доступ до значення через: myRef.current.

Приклад 1: Автоматичне фокусування поля введення Коли користувач заходить на сторінку, ви хочете, щоб курсор одразу був у текстовому полі. Ви використовуєте useEffect, щоб викликати myRef.current.focus() після монтування компонента.

Приклад 2: Секундомір Якщо зберігати ID setInterval у стані (state), компонент буде рендеритися щоразу, коли спрацьовує таймер. Це повільно. Якщо ж зберігати ID у ref, компонент працюватиме швидко. Значення зберігається між рендерами, не створюючи зайвого навантаження на браузер.

State проти Ref: • State: Викликає ререндер. Використовується для даних UI. Оновлення є асинхронними. • Ref: Не викликає ререндер. Використовується для доступу до DOM та пам'яті. Оновлення є синхронними.

Поради для досвідчених розробників (Seniors): • Уникайте надмірного використання. Використовуйте refs лише тоді, коли декларативної логіки недостатньо. • Очищуйте пам'ять. Завжди очищуйте інтервали або слухачі подій (event listeners) у вашій функції очищення (cleanup function). • Не записуйте дані в refs під час рендерингу. Оновлюйте ref.current лише всередині useEffect або обробників подій. Це запобігає побічним ефектам (side effects). • Використовуйте forwardRef. Якщо ви хочете передати ref у власний дочірній компонент, ви повинні обгорнути цей компонент у React.forwardRef.

Джерело: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde