Изучаем хук useRef в React.js

Доброго времени суток, друзья.

Представляю вашему вниманию перевод небольшой заметки про использование хука useRef в React.

Хук useState позволяет добавлять состояние в функциональные компоненты. Данный хук предоставляет возможность передавать значение, сохраняемое при повторном рендеринге страницы, а также интерфейс для обновления этого значения и принудительного запуска ререндеринга.

const [value, setValueAndRerender] = React.useState(     'Начальное значение' ) 

Возможность сохранять значение при ререндеринге обеспечивает динамичность данных, а возможность обновлять значение и запускать повторный рендеринг обеспечивает динамичность пользовательского интерфейса.

Но что если у нас нет необходимости в повторном рендеринге, но при этом нам нужно сохранять значение? В данном случае, нам нужна лишь половина useState:

function usePersistentValue(initialValue) {     return React.useState({         current: initialValue     })[0] } 

useState возвращает массив, в котором первым элементом является сохраненное значение, а вторым — функция, запускающая повторный рендеринг.

Нам нужен только первый элемент, поэтому мы добавляем [0]. При запуске usePersistentValue мы получим объект, в свойстве которого будет содержаться сохраненное значение.

Рассмотрим пример.

Создадим простое приложение, в котором значение счетчика (count) будет увеличиваться на 1 каждую секунду, с кнопкой для остановки счетчика. Вот как может выглядеть реализация данного приложения:

function Counter() {     const [count, setCount] = React.useState(0)      let id      const clear = () => clearInterval(id)      React.useEffect(() => {         id = setInterval(() => setCount(c => c + 1), 1000)          return clear     }, [])      return (         <div>             <h1>{count}</h1>             <button onClick={clear}>Стоп</button>         </div>     ) } 

id создается внутри useEffect, однако нам нужно иметь доступ к этой переменной в обработчике для остановки счетчика. Поэтому мы объявляем id в основной области видимости и инициализируем ее при запуске эффекта.

Все хорошо, правда? К сожалению, нет. Дело в том, что значение id не сохраняется. При изменении состояния count React запускает ререндеринг и значение id сбрасывается до undefined.

Нам необходим способ сохранять значение id при ререндеринге. К счастью, для этого у нас имеется функция usePersistentValue. Попробуем ее использовать:

function usePersistentValue(initialValue) {     return React.useState({         current: initialValue     })[0] }  function Counter() {     const [count, setCount] = React.useState(0)     const id = usePersistentValue(null)      const clear = () => clearInterval(id.current)      React.useEffect(() => {         id.current = setInterval(() => setCount(c => c + 1), 1000)          return clear     }, [])      return (         <div>             <h1>{count}</h1>             <button onClick={clear}>Стоп</button>         </div>     ) } 

Выглядит не очень хорошо, но все работает. Значение id не сбрасывается при каждом рендеринге, поскольку оно содержится в useState, т.е. React сохраняет это значение.

Как вы, наверное, догадались, возможность сохранять значение без запуска повторного рендеринга является настолько востребованной, что React предоставляет для этого встроенный хук — useRef. По сути, это тоже самое, что наша функция usePersistentValue. Вот тот же код с использованием useRef:

function Counter() {     const [count, setCount] = React.useState(0)     const id = React.useRef(null)      const clear = () => clearInterval(id.current)      React.useEffect(() => {         id.current = setInterval(() => setCount(c => c + 1), 1000)          return clear     }, [])      return (         <div>             <h1>{count}</h1>             <button onClick={clear}>Стоп</button>         </div>     ) } 

useRef принимает начальное значение в качестве первого аргумента и возвращает объект со свойством current. Значение, которое присваивается этому свойству, сохраняется при ререндеринге.

Самым распространенным случаем использования useRef является получение доступа к узлам DOM. Если присвоить значение, возвращаемое useRef, какому-нибудь элементу, этот элемент станет значением свойства current. Такой прием используется для получения значений полей для ввода и установки фокуса:

function Form() {     const nameRef = React.useRef()     const emailRef = React.useRef()     const passwordRef = React.useRef()      const handleSubmit = ev => {         ev.preventDefault()          const name = nameRef.current.value         const email = emailRef.current.value         const password = passwordRef.current.value          console.log(name, email, password)     }      return (         <React.Fragment>             <label>                 Имя:                 <input                     type="text"                     placeholder="name"                     ref={nameRef}                 />             </label>             <label>                 Адрес электронной почты:                 <input                     type="text"                     placeholder="email"                     ref={emailRef}                 />             </label>             <label>                 Пароль:                 <input                     type="text"                     placeholder="password"                     ref={passwordRef}                 />             </label>              <hr />              <button onClick={() => nameRef.current.focus()}>                 Установить фокус на поле для ввода имени             </button>             <button onClick={() => emailRef.current.focus()}>                 Установить фокус на поле для ввода адреса электронной почты             </button>             <button onClick={() => passwordRef.current.focus()}>                 Установить фокус на поле для ввода пароля             </button>         </React.Fragment>     ) } 

Таким образом, для добавления в компонент состояния, в котором сохраняется значение и запускается повторный рендеринг, следует использовать useState или useReducer. Для добавления в компонент состояния, в котором сохраняется значение, но не запускается повторный рендеринг, следует использовать useRef.

Благодарю за внимание.