Каким образом useRef сохраняет актуальность элемента?

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

В действительности, useRef сохраняет актуальность элемента путем хранения информации в свойстве current объекта, который возвращается хуком. Когда компонент перерисовывается, useRef не создает новый объект, и поэтому его значение сохраняется между перерисовками. Это означает, что даже когда обновляется элемент, ссылка на него, сохраненная в useRef, остается актуальной, и мы можем обращаться к его свойствам и методам.

Для лучшего понимания, рассмотрим пример использования useRef:

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Фокус на инпут</button>
    </div>
  );
}

В этом примере мы создаем переменную inputRef, используя хук useRef. Первоначальное значение inputRef устанавливается в null. Затем мы передаем inputRef в атрибут ref компонента input, чтобы сохранить ссылку на этот элемент.

В функции handleClick мы вызываем метод focus() на свойстве current объекта inputRef. Это позволяет установить фокус на элементе input при клике на кнопку.

Даже если компонент будет перерисован, useRef сохранит ссылку на элемент, и метод focus() всегда будет применяться к актуальному элементу.

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