Хук useRef() — довольно распространенный хук в React, но многие используют его неправильно. В этой статье я расскажу как об особенностях хука useRef(), так и о том, как вы можете начать использовать его в своих приложениях!
Функция 1: не вызывает повторную визуализацию
Давайте создадим простое приложение React, которое подсчитывает, сколько раз наше приложение отрисовывается с помощью хука useState().
Проблема с этой веб-страницей заключается в том, что каждый раз, когда обновляется состояние numRenders, вызывается повторная визуализация, которая обновляет состояние numRenders. Это создает бесконечную цепочку обновлений и ломает приложение. Наше решение? Хук useRef()!
Теперь наше приложение работает! Обратите внимание, что хук useRef() возвращает объект с именем current, который мы используем для получения значения ссылки.
Функция 2: обеспечивает легкий доступ к элементам DOM
Каждый элемент React имеет атрибут ref. Давайте присвоим входным данным атрибут ref и запишем, как это выглядит.
Когда мы нажимаем кнопку, в консоли мы видим:
<input value>
Мы успешно получили доступ к элементу DOM с помощью хука useRef()! Теперь мы можем манипулировать элементом ввода.
Однако использование хука useRef() для манипулирования DOM немного опасно.
<div>The renders value is: {inputValue}</div>
Обратите внимание, что наш не обновлялся. Это потому, что мы не позволяем React управлять нашим состоянием. Вот почему вы хотите позволить React обрабатывать состояние и только изредка использовать хук useRef(), когда это необходимо.
Функция 3. Отслеживание изменений состояния
Допустим, мы хотели получить предыдущее входное значение. Как бы мы это сделали? Что ж, хук useRef() делает это довольно просто!
Все, что мы сделали, это определили функцию useEffect(), которая запускается каждый раз, когда наше состояние inputValue изменяется! Если бы мы использовали состояние, сработал бы бесконечный повторный рендеринг. К счастью, хук useRef() упростил задачу.
Заключение
Хук useRef() не вызывает повторного рендеринга, а также позволяет нам получать доступ к элементам DOM и отслеживать изменения состояния. Это делает его довольно распространенным хуком для использования в больших приложениях.
Если вы хотите узнать больше о хуке useRef(), ниже я прикрепил несколько замечательных ресурсов:
Упрощенная веб-разработка: https://www.youtube.com/watch?v=t2ypzz6gJm0&list=PLZlA0Gpn_vH_NT5zPVp18nGe_W9LqBDQK&index=12
