useRef Хук

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

Синтаксис:

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

Примітка

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

Приклад:

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

У цьому прикладі хук 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.

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