Если значение рефа было установлено при одних условиях, а затем условия изменились — какая проблема может возникнуть с логикой хука, использующего этот реф?

Проблема устаревших значений ref

В React хук useRef создаёт изменяемый объект, который сохраняется между рендерами. Если вы присваиваете значение рефу внутри условного блока (например, при рендере определённого компонента), а затем условия меняются, реф может продолжать хранить старое значение. Это происходит потому, что реф не обновляется автоматически при изменении условий — он остаётся тем же объектом, и его свойство current меняется только тогда, когда вы явно присваиваете ему новое значение.

Рассмотрим пример: у вас есть компонент, который показывает модальное окно только при определённом условии. Вы сохраняете ссылку на элемент модального окна в рефе. Когда условие становится ложным, модальное окно исчезает из DOM, но реф всё ещё указывает на удалённый элемент. Если хук, использующий этот реф, попытается вызвать метод на элементе (например, focus()), это приведёт к ошибке или непредсказуемому поведению.

function Modal({ isOpen }) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (isOpen && modalRef.current) {
      modalRef.current.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return <div ref={modalRef}>Модальное окно</div>;
}

В этом коде, когда isOpen становится false, компонент возвращает null, и элемент с рефом удаляется. Однако modalRef.current всё ещё ссылается на старый элемент. Если позже условие снова станет true, реф будет перезаписан новым элементом, но до этого момента любое обращение к нему может быть опасным.

Как избежать проблемы

• Всегда проверяйте наличие ref.current перед использованием.
• Используйте useEffect с зависимостями, чтобы синхронизировать логику с актуальным состоянием.
• Если реф нужен только при определённых условиях, рассмотрите возможность создания его внутри условного рендера с помощью колбэк-рефа.

Колбэк-рефы вызываются при монтировании и размонтировании элемента, что позволяет корректно очищать ссылку:

function Modal({ isOpen }) {
  const setModalRef = useCallback((node) => {
    if (node) {
      node.focus();
    }
  }, []);

  if (!isOpen) return null;

  return <div ref={setModalRef}>Модальное окно</div>;
}

Здесь колбэк-реф вызывается только когда элемент существует, и не оставляет устаревших ссылок.

Вывод

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