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

Синтаксис:

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

const refVariable = useRef(initialValue);

Примітка

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

Приклад:

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

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, яка представляє посилання на input;
• Рядки 6-8: Ця стрілочна функція JavaScript обробляє логіку натискання кнопки, яка фокусує курсор користувача на полі вводу;
• Рядки 10-15: Відображається розмітка компонента.

1. У рядку 12 встановлюємо посилання через атрибут ref і призначаємо йому змінну inputRef;
2. Кнопка у рядку 13 використовує атрибут onClick для вказівки функції, яка виконується при натисканні, у цьому випадку це функція handleClick.

Повний код застосунку: