Что такое Ref Hook📎 в React?
- Хук 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>
</>
);
}
useRef возвращает только один элемент. Он возвращает объект с именем current⚡.
Когда мы инициализируем useRef, мы устанавливаем значение: useRef(0)
It's like doing this: const count = {current: 0}.
We can access the count by using count.current.
Доступ к элементам 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>
</>
);
}
Отслеживание изменений состояния🤨
Хук useRef также можно использовать для отслеживания предыдущих значений состояния.
Это связано с тем, что мы можем сохранять useRef значений между рендерингами.
import { useState, useEffect, useRef } from "react";
import {ReactDOM} from "react-dom";
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>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}
В следующей статье я напишу про useReducer Hook🤔 ?
На сегодня все, следите за обновлениями, увидимся в следующем👋🏻.
Спасибо за подписку и аплодисменты😋
Ссылка на День 14
