Учим useRef на примерах — React Hooks

Доброго времени суток, друзья. Продолжим тему React хуков и поговорим сегодня о useRef. Из названия самого хука уже может быть понятно, что он работает со ссылками. Основное его предназначение заключается в предоставлении доступа DOM для работы с дочерними элементами.

Помните, что само использование useRef не считается хорошим «тоном» и работа с DOM элементами напрямую в React должна происходить только тогда, кода других вариантов не осталось.

Видео на эту тему.

useRef

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

Пример:

const ref = useRef(initialValue)

После инициализации данный хук вернет ref-объект со свойством current.

Пример:

const ref = useRef(null)

Данная запись говорит нам, что переменная ref будет равна {current: null}, мы получили объект в котором будем храниться значение. Тут может появиться вопрос: А зачем нам тогда вообще нужен useRef, если можно сохранить это же значение в любом объекте? При изменении значения в объекте, используя другие React хуки, происходит неизбежное перерендеривание компонента, в отличие от использования useRef, где такого не происходит.

Как работать с useRef ?

Разберем стандартный «кейс» использования useRef. Допустим у нас имеется форма с одним input и кнопкой по клику, на которую мы хотим устанавливать фокус на этот input.

Пример:

function Form() {
  const ref = useRef(null)

  const focus = () => {
    ref.current.focus()
  }

  return (
    <>
      <input ref={ref} />
      <button onClick={focus}>Focus</button>
    </>
  )
}

Мы добавляем ref на элемент input, который будем контролировать. По нажатию на кнопку происходит вызов функции focus(), в которой мы обращаемся через свойство current к самому DOM элементу. Далее воспользуемся DOM API функцией focus() для вызова фокуса на элемент input. 

В DOM API помимо работы с фокусом, можно еще добавлять новые элементы или удалять старые, а также работать с атрибутами элементов. Это прекрасная возможность изменения DOM в React, но эта же возможность полностью противоречит концепции работы виртуального DOM. Из-за таких изменений не происходит умного сравнения в виртуальном DOM, что часто приводит к ошибкам.

Заключение

Работа со ссылками в React с использованием useRef – очень удобный способ работы с DOM элементам. Хук useRef не приводит к повторному перерендериванию компонента даже когда происходит изменение данных в нем. C другой стороны злоупотребление работы со ссылками в React компонентах будет вести к нарушению работы в виртуальном DOM, о чем всегда необходимо помнить. Надеюсь, что данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.