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

Синтаксис:

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

const refVariable = useRef(initialValue);

Примітка

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

Приклад:

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

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

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

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