React хук useRef

Хук useRef дозволяє зберігати значення між візуалізаціями.

Його можна використовувати для зберігання змінного значення, яке не спричиняє повторне відтворення під час оновлення.

Це можна використовувати для прямого доступу до елемента DOM.

Не викликає повторних візуалізацій

Якби ми спробували підрахувати, скільки разів наша програма рендериться за допомогою хука useState, ми потрапили б у нескінченний цикл, оскільки сам хук викликає повторний рендеринг (візуалізацію).

Щоб уникнути цього, ми можемо використати хук useRef.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
const [inputValue, setInputValue] = useState("");
const count = useRef(0);

useEffect(() => {
count.current = count.current + 1;
});

return (
<>
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
  />
  <h1>Render Count: {count.current}</h1>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

useRef() повертає лише один товар. Він повертає викликаний об’єкт current.

Коли ми ініціалізуємо useRef, ми встановлюємо початкове значення: useRef(0).

Запустіть це на своєму комп’ютері та спробуйте ввести введені дані, щоб побачити, як збільшилася кількість візуалізацій програми.

Доступ до елементів DOM

Загалом, ми хочемо дозволити React обробляти всі маніпуляції з DOM.

Але є випадки, коли useRef можна використовувати без проблем.

У React ми можемо додати атрибут ref до елемента, щоб отримати до нього доступ безпосередньо в DOM.

import { useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
const inputElement = useRef();

const focusInput = () => {
inputElement.current.focus();
};

return (
<>
  <input type="text" ref={inputElement} />
  <button onClick={focusInput}>Focus Input</button>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Відстеження змін стану

Хук useRef також можна використовувати для відстеження попередніх значень стану.

Це тому, що ми можемо зберігати значення useRef між візуалізаціями.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");

useEffect(() => {
previousInputValue.current = inputValue;
}, [inputValue]);

return (
<>
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
  />
  <h2>Поточне значення: {inputValue}</h2>
  <h2>Попереднє значення: {previousInputValue.current}</h2>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Цього разу ми використовуємо комбінацію useState, useEffect і useRef для відстеження попереднього стану.

У useEffect ми оновлюємо поточне значення useRef кожного разу, коли inputValue оновлюється шляхом введення тексту в поле введення.