Хук useRef дозволяє створити змінну, яка містить посилання на елемент, значення або будь-які інші дані, що не впливають на рендеринг компонента. Це може бути корисно для зберігання змінних значень, доступу до DOM-елементів або збереження значень у різних рендерах компонента.

Синтаксис:

Для використання хука useRef ми оголошуємо змінну (refVariable) і присвоюємо їй результат виклику useRef(). За бажанням, ми можемо передати початкове значення (initialValue) як аргумент цього хука.

js
Скопіювати код
Expand

Примітка

Поточне значення можна отримати та оновити за допомогою властивості refVariable.current. Краса useRef полягає у тому, що вона дозволяє нам маніпулювати цими значеннями, не викликаючи повторного рендерингу компонента.

Приклад:

Створімо компонент FormInput, який використовує хук useRef для створення посилання на елемент вводу і фокусується на ньому при натисканні кнопки.

jsx
Скопіювати код
Expand

У цьому прикладі хук useRef створює посилання з назвою inputRef. Це посилання присвоюється атрибуту ref елемента input, що дозволяє нам отримати доступ до елемента input за допомогою inputRef.current.

Пояснення по рядках:

• Рядок 1: Імпортуємо хук useRef з бібліотеки React, щоб використати його функціональність.

• Рядок 3: Компонент FormInput визначається за допомогою звичайного синтаксису функцій.

• Рядок 4: Ми ініціалізуємо змінну inputRef за допомогою хука useRef, що представляє посилання на вхідні дані.

• Рядки 6-8: Ця функція JavaScript-стрілки обробляє логіку натискання кнопки, яка фокусує курсор користувача на полі введення.

• Рядки 10-15: Відображається розмітка компонента.

  1. У рядку 12 ми встановлюємо посилання за допомогою атрибута ref і присвоюємо змінну inputRef як його значення.

  2. Кнопка в рядку 13 використовує атрибут onClick, щоб вказати функцію, яка буде виконуватися при натисканні, в даному випадку це функція handleClick.

Повний код програми: